首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3实现背景模糊的三种方式

css3实现背景模糊使用伪元素,因为伪元素的模糊度不会被父元素的子代继承。
Posted in HTML / CSS onMarch 09, 2021

一、普通背景模糊

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*背景模糊*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            filter: blur(2px);
            z-index: 1;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            text-align: center;
            z-index: 2;
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">背景模糊</div>
    </div>
</body>

效果如下所示：

css3实现背景模糊的三种方式

 这样写会使整个div的后代模糊并且还会出现白边，导致页面非常不美观，要想解决这个问题，我们可以使用伪元素，因为伪元素的模糊度不会被父元素的子代继承。

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*背景模糊*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            z-index: 1;
        }

        .bg:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /* 从父元素继承 background 属性的设置 */
            background: inherit;
            filter: blur(2px);
            z-index: 2;
        }


        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            text-align: center;
            z-index: 3;
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">背景模糊</div>
    </div>
</body>

效果如下所示：

css3实现背景模糊的三种方式

 

二、背景局部模糊

上一个效果会了之后，局部模糊效果就比较简单了。

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*背景模糊*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            z-index: 1;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background: inherit;
            z-index: 2;
        }

        .content:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: inherit;
            filter: blur(15px);
            /*为了模糊更明显，调高模糊度*/
            z-index: 3;
        }

        .content>div {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 4;
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">
            <div>背景局部模糊</div>
        </div>
    </div>
</body>

效果如下图所示：

css3实现背景模糊的三种方式

 三、背景局部清晰

<Style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*背景模糊*/
        .bg {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("./bg.jpg") no-repeat fixed;
            background-size: cover;
            box-sizing: border-box;
            z-index: 1;
        }

        .bg:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: inherit;
            filter: blur(5px);
            z-index: 2;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            line-height: 200px;
            text-align: center;
            background: inherit;
            z-index: 3;
            box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
        }
    </Style>
</head>

<body>
    <div class="bg">
        <div class="content">
            <div>背景局部清晰</div>
        </div>
    </div>
</body>

效果如下图所示：

css3实现背景模糊的三种方式

css3实现背景模糊的三种方式

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
CSS心形加载的动画源码的实现
德生9700DX(1) ICF-SW55(1) 飞利浦(2) 德生PL330(2) Panasonic(1) 松下(1) ICF-SW7600GR(1) PHILIPS(3) 根德(2) 德劲1103(3)
You might like
文件上传的实现
2006/10/09 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
php实现留言板功能（会话控制）
2017/05/23 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python解决汉字编码问题：Unicode Decode Error
2017/01/19 Python
分析Python中解析构建数据知识
2018/01/20 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python实现感知器算法（批处理）
2019/01/18 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python字典底层实现原理详解
2019/12/18 Python
django API 中接口的互相调用实例
2020/04/01 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
物业总经理岗位职责
2014/02/28 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
升学宴主持词
2014/04/02 职场文书
三严三实学习心得体会
2014/10/13 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang