css3实现背景模糊的三种方式(小结)


Posted in HTML / CSS onMay 15, 2020

一、普通背景模糊

代码:

<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实现背景模糊的三种方式的文章就介绍到这了,更多相关css3背景模糊内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 #HTML / CSS
css3的focus-within选择器的使用
May 11 #HTML / CSS
CSS3实现渐变背景兼容问题
May 06 #HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 #HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 #HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 #HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 #HTML / CSS
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
详解php的socket通信
2015/08/11 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
Android分包MultiDex策略详解
2017/10/30 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
基于Python的OCR实现示例
2020/04/03 Python
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
智乐游戏测试笔试题
2014/05/21 面试题
护理助产毕业生的求职信
2014/03/02 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
文秘个人求职信范文
2014/04/22 职场文书
大学生社会实践方案
2014/05/11 职场文书
七夕情人节促销方案
2014/06/07 职场文书
奖学金感谢信
2015/01/21 职场文书
党小组推荐意见
2015/06/02 职场文书
小学生安全教育心得体会
2016/01/15 职场文书