Html 所有css样式规则都是从一个div元素中剥离出来的，而不是从其他元素中剥离出来的

我正在尝试创建一个网站的标题，该网站的标题显示在图像上。我将其设置为使用带有背景图像的div类元素。但是，我不明白为什么我创建的这个div类元素中的背景图像没有显示

经过检查，我发现当我呈现元素时，与div class元素相关联的css样式规则正在从元素中剥离（在Firefox和Chrome中，没有尝试IE）

我的css设置如下：

.text-over-image {
   width: 960px;
   height: 100px;
   background-image: url("http://www.lupenet.org/wp-content/themes/Lupenet/images/header.jpg");
   margin-left: auto ;
   margin-right: auto ;
}

h8 { 
   position: absolute; 
   top: 20px; 
   left: 400px; 
   width: 960px;
}

h8 span { 
   color: black; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   padding: 10px; 
}

h8 span.spacer1 {
   padding:0 5px;
}

<div class="text-over-image;" >
   <h8><span style="position:absolute;">La Unión Del Pueblo Entero<span class='spacer1'></span>
   <br><span class='spacer1'></span>"Celebrando el Pasado y Viendo Hacia el Futuro"</span></h8>
</div>

html如下所示：

.text-over-image {
   width: 960px;
   height: 100px;
   background-image: url("http://www.lupenet.org/wp-content/themes/Lupenet/images/header.jpg");
   margin-left: auto ;
   margin-right: auto ;
}

h8 { 
   position: absolute; 
   top: 20px; 
   left: 400px; 
   width: 960px;
}

h8 span { 
   color: black; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   padding: 10px; 
}

h8 span.spacer1 {
   padding:0 5px;
}

<div class="text-over-image;" >
   <h8><span style="position:absolute;">La Unión Del Pueblo Entero<span class='spacer1'></span>
   <br><span class='spacer1'></span>"Celebrando el Pasado y Viendo Hacia el Futuro"</span></h8>
</div>

普韦布洛大学

“庆祝未来”

在意识到出现问题后，我设置元素

.text over image

的高度和宽度属性，以防div被渲染得太小而无法查看图像，但背景图像仍然无法显示。当我使用firebug检查该元素时，我发现div元素

。图像上的文本

根本不显示任何背景图像属性。事实上，所有css样式规则都是从该div元素中剥离出来的

---

我甚至试着复制另一个网站的css和html，这正是我想要做的，但当我这么做时，同样的事情发生了（样式规则从div元素中剥离）。但是，css样式规则并没有从其他元素中剥离出来。

我阅读了您的css，之后我才说到这一点！HTML中没有合法的

h8

元素

---

所以我想问题在于h8的使用，试着用h6替换它。

删除

来自您的类：

<div class="text-over-image;">



应该是

即使带有无效的
h
标记，图像仍应显示。我认为错误是
，如下所述