父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 opacity会影响所有子元素。有办法吗？用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/

中的工作示例

Answer 2

最合理的解决方案是：

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 to 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}