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 相关文章推荐
CSS3制作日历实现代码
Jan 21 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
解析isset与is_null的区别
2013/08/09 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php发送邮件的问题详解
2015/06/22 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jQuery 1.0.2
2006/10/11 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
自我鉴定总结
2014/03/24 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
催款函范本大全
2015/06/24 职场文书
航班延误投诉信
2015/07/02 职场文书
葬礼主持词
2015/07/02 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL