关于子元素继承父元素透明度（opacity）的解决方法

最新推荐文章于 2023-08-16 10:39:13 发布

原创最新推荐文章于 2023-08-16 10:39:13 发布 · 1.9w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css透明度 #opacity #子元素继承父级透明度

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种常见CSS问题的解决方案：如何避免子元素继承父元素的透明度（opacity）。通过使用正确的背景颜色定义方法，可以确保子元素不受父元素透明度属性的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做移动端的时候遇到了子元素继承父元素的透明度（opacity）的情况，下面贴出解决方法：
问题重现：
.opacity{background: #000；opacity：0.7}
这种写法就算给子元素opacity_child重新赋值opacity：1；他也同样会继承父元素opacity的值。
正确写法：
.opacity{background: rgba(0,0,0,.7);}