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

Question

Wen我将不透明度应用于div，该div内的所有其他元素获得与父div相同的不透明度，其中我希望孩子不要有任何不透明度。我将不胜感激。

Answer 1

简单的答案：这是不可能的。你需要重构你的标记。

编辑 - 你想要一个解释，你明白了。

的CSS specs状态

< alphavalue>

在语法上一个<号>。穿过整个对象的统一不透明度设置将应用于。任何超出范围0.0（完全透明）到1.0（完全不透明）的值将被限制在此范围内。如果对象是一个容器元素，那么效果就好像容器元素的内容与当前背景混合使用掩码，其中掩码的每个像素的值为< alphavalue>。 。

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

使用的变通办法颜色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> 

Answer 2

你只能控制使用rgba()颜色表示法，您父母div的某些单个组件的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属性;否则你父母div中的所有内容的opacity将相对于此opacity，并且指定父母opacity: 0.5和子女opacity: 2.0也不起作用。