首页
所有分类
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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
CSS心形加载的动画源码的实现
FTP服务器(1) 磁盘分区(1) DNS服务器(2) 对撞机(1) .NET Framework(2) 国际空间站(1) 夸克(1) 粒子对撞机(1) IIS7(1) 界面设计(1)
You might like
图象函数中的中文显示
2006/10/09 PHP
我的论坛源代码(三)
2006/10/09 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
js跑马灯代码(自写)
2013/04/17 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
python笔记:mysql、redis操作方法
2017/06/28 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python进行两个表格对比的方法
2018/06/27 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
python跨文件使用全局变量的实现
2020/11/17 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式，官方实例)
2021/01/10 Python
影视动画专业个人的自我评价
2013/12/31 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
校友会致辞
2015/07/30 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python