z-index和不透明度问题

Question

我正试图在我的所有DIV背面制作一个透明的封装（不透明度：0.6），但前面的所有内容都显得透明。

任何想法如何解决这个问题？

你可以在这里找到这样的例子：http://testing.squaretise.com/（我给了包装器（#wrap）一个红色边框，这样你就可以更容易理解了）

Answer 1

使用而不是：

opacity: 0.6;

这样：

background: rgba(255, 255, 255, 0.6);

颜色为RGB，最后一位数字为透明度级别。

Answer 2

你需要绝对定位你的透明div。

http://www.w3.org/TR/css3-color/#transparency解释了后代如何获得透明度。

Answer 3

不透明度是继承的。如果父母是透视的，孩子也是如此。

更好的方法是删除opacity并将背景颜色设置为透明：

.foo {
  background: rgba(0,0,0,.5);
}

Answer 4

您应该使用透明背景，而不是不透明度。 如果要支持IE8，背景图像是最好的方法。 （CSS3颜色：http://caniuse.com/#search=rgba）

使用data-uri获得更好的性能。

Answer 5

你甚至可以用opacity来做。这是一个例子：

HTML

<div id="wrapper"> 
    <div id="contentOrWhatever">
    </div>
</div>

CSS

body {
    z-index:0;
}
#wrapper {
    z-index:1;
    opacity:0.6;
}
#contentOrWhatever {
    z-index:99;
    opacity:1;
}

所以#wrapper现在是透明的，始终在#contentOrWhatever之后。 希望我能帮到你。