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美化表单控件全集
Jun 29 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
JavaScript中的细节分析
2012/06/30 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python 内置函数汇总详解
2019/09/16 Python
Python 字典中的所有方法及用法
2020/06/10 Python
网络安全方面的面试题
2015/11/04 面试题
安全事故检讨书
2014/01/18 职场文书
国庆庆典邀请函
2015/02/02 职场文书
家庭经济困难证明
2015/06/23 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
公证书
2019/04/17 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis