覆盖在 html 修复

Question

如您所见：

http://clients.noxxie.nl/rashosting/

我在图像较浅的黑色背景中使用叠加层。 但文本也在叠加中，这不会发生。

现在有人可以解决它吗？

Answer 1

您的 .text 容器的 opacity 为 0.5，并被其同级内容继承。您可以通过在容器上使用rgba 颜色而不是不透明度来修复它（尽管在 IE（我相信 IE9 及更高版本）中支持稀疏），如下所示：

.text {
background-color: rgba(0, 0, 0, 0.5);
}

或者您可以使用 1x1 半透明 png 图像作为该容器的背景。另一种方法是创建一个覆盖 div，绝对定位以覆盖具有不透明度的 .text 容器和足够低的 z-index 以留在其他所有内容后面。像这样的：

HTML

<div class="overlay">&nbsp;</div>

您可以将.overlay div 放在您的.text 容器内，就在div 的底部。

CSS

.text {
  position:relative;
  z-index:10;
}

.overlay {
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background-color:black;
  opacity:0.5
  z-index:1;
}