html

Question

我正在尝试在我的所有 DIV 的后面制作一个包装器，它看起来是透明的（不透明度：0.6），但前面的所有东西也看起来是透明的。

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

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

score 15 · Accepted Answer

使用代替：

opacity: 0.6;

这：

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

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

不透明度是遗传的。如果父母是透明的，那么孩子也是如此。

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

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

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

你甚至可以用opacity. 这是一个例子：

<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。希望我能帮助你。