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实现自定义滚动条代码分享
Aug 18 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
numpy基础教程之np.linalg
2019/02/12 Python
python修改FTP服务器上的文件名
2019/09/11 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
恶意软件的定义
2014/11/12 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
2014政务公开实施方案
2014/02/19 职场文书
2014年应急工作总结
2014/12/11 职场文书