首页
所有分类
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 相关文章推荐
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 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
Seaborn(1) tensorflow(2) Inception(2) Xception(1) ResNet50(1) 逆序(1) 字符串(2) jenkins(1) PostMapping(1) yolo3(1)
You might like
PHP无限分类代码，支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php长字符串定义方法
2012/07/12 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
手工制作的意大利皮革运动鞋：KOIO
2020/01/05 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
2014年公务员退休工资改革方案
2014/10/01 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
如何写好活动总结
2019/06/21 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js