10

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

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

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

4

5 回答 5

15

使用代替：

opacity: 0.6;

这：

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

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

于 2012-12-26T20:34:50.473 回答
2

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

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

于 2012-12-26T20:28:11.147 回答
0

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

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

.foo {
  background: rgba(0,0,0,.5);
}
于 2012-12-26T20:33:45.977 回答
0

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

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

于 2012-12-26T20:49:42.410 回答
-1

你甚至可以用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。希望我能帮助你。

于 2014-02-07T12:34:59.390 回答