如何在不影响其中的其他元素的情况下将不透明度应用于div？

Question

我将不透明度应用于div，该div中的所有其他元素获得与父div相同的不透明度，其中我希望孩子不具有任何不透明度。我很感激你的帮助。

Answer 1

您只能使用div颜色表示法控制父rgba()的某些单独组件的Alpha。即便如此，对rgba()的浏览器支持比对opacity的支持稍差，并且您不能使用它的供应商扩展：

#parent {
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(153, 0, 0, 0.5);
}

如果您需要浏览器支持，请使用颜色的透明PNG图像：

#parent {
    color: rgba(255, 255, 255, 0.5);
    background-image: url(bg.png);
}

不要设置opacity属性;否则，您父opacity内所有内容的div将与此opacity相关，并且指定父opacity: 0.5和子opacity: 2.0也不会有效。< / p>

Answer 2

简单回答：这是不可能的。您需要重新构建标记。

编辑 - 你需要一个解释，你得到它。

CSS specs州

  

＆LT; alphavalue＆GT;

     

语法上是＆lt; number＆gt;。要在整个对象中应用的统一不透明度设置。 0.0（完全透明）到1.0（完全不透明）范围之外的任何值都将被限制在此范围内。如果对象是容器元素，则效果就好像容器元素的内容使用掩码与当前背景混合，其中掩码的每个像素的值是＆lt; alphavalue＆gt;。

这意味着，容器不透明度适用于其内容。

使用rgba颜色的变通方法不会影响图像，表单元素，滚动条等。

因此，我建议重组这样的标记：

<div style="position: relative">
    <div style="position: absolute; top: 0; left: 0; opacity: .5">
        <!-- semi-transparent content here -->
    </div>
    <div style="position: absolute; top: 0; left: 0;">
        <!-- fully opaque content here -->
    </div>
</div>