容器内容的不透明度

时间:2011-04-27 19:48:34

标签: html css opacity

我有一个使用CSS设置background-color的容器。在这个容器中还有4个div个。我想显示0.5不透明度的容器。但是,当我这样做时,容器的内容也显示在0.5不透明度。有什么办法可以完全不透明地显示容器内容吗?

5 个答案:

答案 0 :(得分:6)

CSS 3介绍rgba colours。您可以将它们与translucent PNGbackwards compatibility背景图片结合使用。

#alpha {
    background: url(blue_0.5_pixel.png);
    background: rgba(0%, 0%, 100%, 0.5);
}

答案 1 :(得分:2)

一切:opacity: 0.5;
只有背景:background-color: rgba(0, 0, 0, 0.5);

有些浏览器可能不支持RGBA,所以请务必查看。

答案 2 :(得分:1)

使用RGBA背景颜色功能。

.containerclass { background-color: rgba(255, 255, 128, .5); }

答案 3 :(得分:0)

对于支持CSS3的浏览器,您可以使用半透明颜色。您也可以使用半透明PNG作为背景,但IE6不支持(如果这是一个问题)。

否则,如果容器没有继承它,则不可能在容器上具有0.5不透明度。您必须使用绝对定位将两个元素放在彼此的顶部。

答案 4 :(得分:0)