CSS3为背景图设置遮罩并解决遮罩样式继承问题


Posted in HTML / CSS onJune 22, 2020

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

CSS3为背景图设置遮罩并解决遮罩样式继承问题

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

CSS3为背景图设置遮罩并解决遮罩样式继承问题

例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>

CSS3为背景图设置遮罩并解决遮罩样式继承问题

到此这篇关于CSS3为背景图设置遮罩并解决遮罩样式继承问题的文章就介绍到这了,更多相关CSS3背景图遮罩内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 #HTML / CSS
CSS3新增布局之: flex详解
Jun 18 #HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 #HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 #HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 #HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 #HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 #HTML / CSS
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
php 字符转义 注意事项
2009/05/27 PHP
使用php实现截取指定长度
2013/08/06 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
Shell如何接收变量输入
2012/09/24 面试题
管理站站长岗位职责
2013/11/27 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
机关节能减排实施方案
2014/03/17 职场文书
质量提升方案
2014/06/16 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
庆元旦演讲稿
2014/09/15 职场文书
师范生小学见习总结
2015/06/23 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python