用CSS3怎样试下背景图遮罩，但背景图文字显示的效果

发布时间：2023-10-20 15:32:52 所属栏目：语言来源：

导读：工作中很多时候需要对图片背景作处理,比如设置通透性，模糊处理等等

但是如果对背景图所在标签直接设置这些效果的话，这些样式会被子标签继承。

例1: 给背景所在标签设置模糊效果，影响到了子标签内的文字

工作中很多时候需要对图片背景作处理,比如设置通透性，模糊处理等等

但是如果对背景图所在标签直接设置这些效果的话，这些样式会被子标签继承。

例1: 给背景所在标签设置模糊效果，影响到了子标签内的文字

   <style>

        .parent{

            background: url('./test.jpg') no-repeat center;

            filter: blur(3px)

        }

        .son{

            filter: blur(0);

            /*

            在子标签内设置相同属性也无法覆盖继承来的样式

            */

        }

    </style>

    <div class="parent">

        <p class="son">Hello</p>

    </div>

解决方法：

为父标签中添加一个标签，令其绝对定位并铺满父标签，将背景 / 样式设置在该标签内。

   <style>

        .parent{

            position: relative;

            /*让父标签相对定位，使.middle相对自己定位*/

        }

        .middle{

            background: url('./test.jpg') no-repeat center;

            filter: blur(3px);

            position: absolute;

            height: 100%;

            width: 100%;

            z-index: -1;

            /*降低图层高度，防止遮盖其他子元素*/

        }

        .son{

        }

    </style>

    <div class="parent">

        <div class="middle"></div>

        <p class="son">Hello</p>

    </div>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!