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

如果我对一个div应用不透明度，那么该div中的所有其他元素都将获得与父div相同的不透明度，我希望子div不具有任何不透明度。非常感谢您的帮助。

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

编辑-你想要一个解释，你就得到了

国家

从句法上说是一种语言。要在整个对象上应用的均匀不透明度设置。0.0（完全透明）到1.0（完全不透明）范围之外的任何值都将限制在此范围内。如果对象是一个容器元素，则效果就像使用遮罩将容器元素的内容与当前背景混合，其中遮罩的每个像素的值为

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

使用

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>

---

您只能使用

rgba（）

颜色符号控制父级

div

的某些单个组件的alpha值。即使如此，对

rgba（）

的浏览器支持也比对

opacity

的支持稍差，并且您不能使用供应商扩展：

#父级{
颜色：rgba（255，255，255，0.5）；
背景色：rgba（153,0,0,0.5）；
}

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

#父级{
颜色：rgba（255，255，255，0.5）；
背景图片：url（bg.png）；
}

---

不要设置

不透明度

属性；否则，父级

div

中所有内容的

opacity

都将与此

opacity

相关，并且指定父级

opacity:0.5

和子级

opacity:2.0

也将不起作用。

我倾向于否决这一点，但我暂时不谈。你的理由是什么？你读过@BoltClock的帖子吗？@Matti:我猜他的意思是不可能单独使用

不透明度属性。如果它包括浏览器支持，我会给+1:@Carrie Kendall:
背景色旁边的评论中暗示了这一点，但我还是把它扩展成了代码。懒惰是不值得的；）您可以使用普通的十六进制颜色将背景色设置为灰色，然后在设置rgba之后，这将为不受支持的浏览器提供纯色。@Luke Alderton:这也是，但前提是要返回到不透明的颜色而不是透明度。