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 相关文章推荐
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JQuery基础语法小结
2015/02/27 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python GUI计算器的实现
2020/10/09 Python
Python爬虫开发与项目实战
2020/12/16 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
绿化先进工作者事迹材料
2014/01/30 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
环保倡议书300字
2014/05/15 职场文书
争先创优演讲稿
2014/09/15 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2015元旦感言
2015/12/09 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Python自动化之批量处理工作簿和工作表
2021/06/03 Python