首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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背景模糊内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

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

- Author -

执手听风吟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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
Athens(1) iPhone(1) iOS(1) moviepy(1) iOS16(1) RNA(2) iOS15(1) 陨石(1) compose(3) DNA(2)
You might like
PHP基本语法总结
2014/09/06 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
毕业生就业自荐信
2013/12/04 职场文书
先进个人获奖感言
2014/01/24 职场文书
利群广告词
2014/03/20 职场文书
环保倡议书范文
2014/05/12 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
找规律教学反思
2016/02/23 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python