CSS如何只改变父元素背景透明度不改变子元素透明度

最新推荐文章于 2022-08-19 16:59:27 发布

慕容屠苏

最新推荐文章于 2022-08-19 16:59:27 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：大前端爬坑之路文章标签： CSS 父元素背景透明度子元素透明度

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/71083647

188 篇文章 ¥39.90 ¥99.00

订阅专栏

本文探讨了CSS中如何仅调整父元素的背景透明度而不影响子元素的透明度问题。当使用opacity属性时，父元素及其所有子元素的透明度会一起改变。但有一种方法可以确保子元素保持不透明。

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

CSS如何只改变父元素背景透明度不改变子元素透明度

使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用

例如：

<div style="opacity:0.4; background-color:#000000;">
<div style="opacity:1.0;">
显示文字
</div>
</div>

这样设置：文字元素的透明度也会是0.4。

<div style="background-color:rgba(0,0,0,0.4)">
<div style="opacity:1.0;">
显示文字
</div>
</div>

这样设置文字的透明对就不会是0.4了。