父div透明背景但不影响子div透明度

Question

<div class="container">
    <div class="site_content">
        some stuff, images etc
    </div>
</div>


.container{
    background-color:#333;
    }

我想要的是.container div的不透明度为80%,但.site_content的内容为100%

设置css不透明度会影响所有子元素.有办法做到这一点吗？用jQuery？

由于将如何使用,我宁愿避免使用另一个透明div来定位以实现效果的技术.

Answer 1

您需要在容器div上使用RGBA背景属性.background: rgba(64, 64, 64, 0.5).64,64,64是RGB颜色值.0.5是不透明度值.现在,父母可以拥有自己的不透明度值而不影响孩子.FireFox,Opera,Chrome,Safari和IE9完全支持此功能.

查看http://jsfiddle.net/Rp5BN/上的工作示例

为了支持IE 5.5到8,我们需要使用特定于供应商的CSS'渐变过滤器:'所以你需要添加它.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

其中7f表示127,即50%不透明度,404040是颜色.

查看IE http://jsfiddle.net/Rp5BN/2/中的工作示例