CSS3实现模糊背景的三种效果示例


Posted in HTML / CSS onMarch 30, 2021

不开头了,直接进入主题。
普通背景模糊效果如下:

CSS3实现模糊背景的三种效果示例

使用属性:

filter:(2px)

普通背景模糊

为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。

实现思路:
在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。
说了这么多,来点代码提提神。

简单的html布局:

<div class="bg">
   <div class="drag">like window</div>
</div>

css:

/*背景模糊*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(2px);
    z-index: 2;
}
.drag{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height:200px;
    text-align: center;

    z-index:11;
}

当然,看了上面的代码就能发现父容器下面的子代元素也是要使用绝对定位的,但是这个不会影响到后面的布局的,所以请放心使用(有问题可以找博主麻烦~)。要注意的地方是要使用z-index确定层级关系,必须确保子代元素(也就是这里的drag)是在最上层的。不然子代元素的文字是不会出现的。

上面的代码还有一个保证div居中的方法,细心的同学应该已经注意到了吧!不使用flex布局的情况下这样居中应该是比较简单的方法了。

那么这样写代码表现出来的效果是怎么样的呢?

CSS3实现模糊背景的三种效果示例

背景局部模糊

相比较上一个效果而言,背景局部模糊就比较简单了。这时父元素根本就不用设置伪元素为模糊了。直接类比上面的代码把子元素模糊掉,但是子元素的后代可能不能模糊了(这点要注意,解决办法就是上一个效果的描述那样)。
HTML布局稍微变了一下:

<div class="bg">
   <div class="drag">
        <div>like window</div>
   </div>
</div>

css代码如下:(大家注意对比)

/*背景局部模糊*/
.bg{
    width:100%;
    height:100%;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.drag{
    margin:100px auto;
    width:200px;
    height:200px;

    background: inherit;

    position: relative;
}
.drag >div{
    width:100%;
    height: 100%;
    text-align: center;
    line-height:200px;
    position: absolute;
    left:0;
    top:0;
    z-index: 11;
}
.drag:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(15px);/*为了模糊更明显,调高模糊度*/
    z-index: 2;
}

效果如下:

CSS3实现模糊背景的三种效果示例

背景局部清晰

背景局部清晰这个效果说简单也不简单,说难也不难。关键还是要应用好background:inherit属性。这里可不能使用transform让它垂直居中了,大家还是选择flex布局吧。如果这里再使用transform属性的话会让背景也偏移的。这样就没有局部清晰的效果了。
html布局不变,
注意看css的变化:

/*背景局部清晰*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 1;
}
.drag{
    position: absolute;
    left:40%;
    top:30%;
    /*transform: translate(-50%,-50%);*/
    width:200px;
    height:200px;
    text-align: center;

    background: inherit;
    z-index:11;

    box-shadow:  0 0 10px 6px rgba(0,0,0,.5);
}

效果展示:

CSS3实现模糊背景的三种效果示例

到此这篇关于CSS3实现模糊背景的三种效果示例的文章就介绍到这了,更多相关CSS3模糊背景内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
You might like
php minixml详解
2008/07/19 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python中条件判断语句的简单使用方法
2015/08/21 Python
python 实现多维数组(array)排序
2020/02/28 Python
python生成大写32位uuid代码
2020/03/03 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
学校消防安全制度
2014/01/30 职场文书
爱心捐款倡议书
2014/04/14 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
导游欢迎词范文
2015/01/23 职场文书