1

在这个网页上，我正在开发字母“Sa”和“Flu”以某种方式在图像的后面和前面。

图像没有完全在顶部 - 图像中没有透明度，所以如果是这样，那么文本就根本不可见。

然而，图像显然也不在下面。

这里发生了什么？

截屏

4

3 回答 3

3

添加div 似乎可以解决问题，这是因为position: relative它不适用于静态定位的元素（默认值，无值），正如Christofer 的回答中进一步解释的那样。headerz-indexposition

透明度从更高的容器传播，（在这种情况下#maincontainer）。

于 2012-08-25T12:50:30.543 回答
2

有透明度是因为您在图片上设置了不透明度。

去除此处的不透明度： 

#maincontainer {
    opacity: 0.92; /*< remove this line*/
    text-align: justify;
}

解决问题。

于 2012-08-25T12:53:38.480 回答
2

透明度来自#maincontainer不透明度设置为 0.92 的 ，这会导致其所有内容略微透明，除非您在子元素上指定其他内容。

#maincontainer {
   margin: 0;
   padding-left: 14px;
   padding-right: 14px;
   padding-top: 10px;
   padding-bottom: 0px;
   text-align: justify;
   opacity: 0.92; /* Your transparency */
}

更新：

如果您想要定位元素的相关元素未定位，则设置z-index是不够的。z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。这就是Truth 建议的解决方案将标头设置为position: relative;有效的原因。现在可以使用 z-index 将图像放置在文本下方。

于 2012-08-25T12:52:21.357 回答