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之多背景background使用示例
Oct 18 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
You might like
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP速成大法
2015/01/30 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
php支付宝APP支付功能
2020/07/29 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
读jQuery之八 包装事件对象
2011/06/21 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
Vue header组件开发详解
2018/01/26 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
跟老齐学Python之list和str比较
2014/09/20 Python
Python工程师面试必备25条知识点
2018/01/17 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python pandas生成时间列表
2019/06/29 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
回门宴新郎答谢词
2014/01/12 职场文书
简历自我评价模版
2014/01/31 职场文书
《春雨》教学反思
2014/04/24 职场文书
安全技术说明书
2014/05/09 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
保险公司增员口号
2015/12/25 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android