覆盖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放在div的底部.text容器内。

<强> 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;
}