首页
所有分类
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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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
filter(1) reduce(2) Tsmoothie(1) EditText(1) SQLite3(1) 短信验证码(1) dockerfile(1) Selenium(1) TextInputLayout(1) Django(9)
You might like
php foreach、while性能比较
2009/10/15 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
如何为vue的项目添加单元测试
2018/12/19 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
英国经典球衣网站：Classic Football Shirts
2017/05/20 全球购物
Godiva巧克力英国官网：比利时歌帝梵巧克力
2018/08/28 全球购物
美国亚马逊旗下男装网站：East Dane（支持中文）
2019/09/25 全球购物
美国名牌手表折扣网站：Jomashop
2020/05/22 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
客服部工作职责范本
2014/02/14 职场文书
个人委托书格式
2014/04/04 职场文书
医院信息公开实施方案
2014/05/09 职场文书
建筑节能汇报材料
2014/08/22 职场文书
单位委托书
2014/10/15 职场文书
安全生产工作汇报
2014/10/28 职场文书
单位实习介绍信
2015/05/05 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers