css入门之滤镜、透明度不应用于子元素

crayon-shin-chan

于 2021-07-03 15:01:05 发布

阅读量870

点赞数

分类专栏： surprise # css 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/qq_27868061/article/details/118439666

版权

surprise 同时被 2 个专栏收录

932 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

css

24 篇文章

订阅专栏

本文介绍了CSS中滤镜和透明度的默认应用特性，当应用于父元素时，这些效果通常会影响到子元素。为了解决这个问题，文章详细探讨了透明度在背景色中的应用，并提出通过使用RGB颜色来实现背景色的透明，而不会影响子元素。对于滤镜等复杂情况，建议使用多层嵌套的结构，通过定位来隔离滤镜效果，以确保内容子元素不受影响。

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

1.简介

当我们使用filter、opacity等css属性时，会发现滤镜与透明的效果同时应用到了子元素，这是默认行为。

其实大部分情况下，都希望这些效果只应用于父元素的背景（背景图、背景色）

2.透明度与背景色

一般是这样应用透明度的，即使用opacity：

<style>
    .item{
        width:100px;
        height:100px;
        background-color: green;
        opacity: 0.5;
        text-align: center;
    }
</style>
<div style="display: flex;flex-direction: row;">
    <div class="item">pig</div>
</div>