Question

我正在尝试为网站创建标题，其中网站标题显示在图片上。我将其设置为使用带有背景图像的div类元素。但是，我无法弄清楚为什么我创建的这个div类元素中的背景图像没有显示。

经过检查，我发现在渲染时，与div类元素相关联的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;
}

html看起来像这样：

<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元素.text-over-image根本没有显示任何背景图像属性。实际上，所有css样式规则都从div元素中删除。

我甚至尝试复制另一个网站的css和html，这正是我正在尝试做的事情，但是当我这样做时，同样的事情发生了（样式规则从那个div元素中被剥离）。但是，css样式规则不会从其他元素中删除。

Answer 1

从班级中删除;：

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

应该只是<div class="text-over-image">

<强> jsFiddle example

Answer 2

我读了你的CSS，之后我就到了这一点！ HTML中没有合法的h8元素。

所以我猜问题是使用h8，尝试用h6替换它。

所有css样式规则都从一个div元素中剥离，但没有其他元素

2 个答案: