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实现背景模糊的三种方式

HTML / CSS 相关文章推荐
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
CSS心形加载的动画源码的实现
You might like
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
实习心得体会
2014/01/02 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
公证委托书
2014/08/01 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
感恩父母主题班会
2015/08/12 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL