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 相关文章推荐
CSS3中Color的一些特性介绍
May 27 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
HTML中link标签属性的具体用法
May 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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python更改已存在excel文件的方法
2018/05/03 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
公司活动邀请函
2014/01/24 职场文书
土地转让协议书范本
2014/04/15 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python