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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 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
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
Yii2单元测试用法示例
2016/11/12 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python 字符串追加实例
2019/07/20 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python socket模块方法实现详解
2019/11/05 Python
python opencv如何实现图片绘制
2020/01/19 Python
新手学python应该下哪个版本
2020/06/11 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Django如何批量创建Model
2020/09/01 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
便利店的创业计划书
2014/01/15 职场文书
银行批评与自我批评
2014/02/10 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
后备干部培训方案
2014/05/22 职场文书
2014年医院工作总结
2014/11/20 职场文书
悬空寺导游词
2015/02/05 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android