CSS3实现模糊背景的三种效果示例
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
不开头了，直接进入主题。
普通背景模糊效果如下：
使用属性：
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(?css/"../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布局的情况下这样居中应该是比较简单的方法了。
那么这样写代码表现出来的效果是怎么样的呢？
背景局部模糊
相比较上一个效果而言，背景局部模糊就比较简单了。这时父元素根本就不用设置伪元素为模糊了。直接类比上面的代码把子元素模糊掉，但是子元素的后代可能不能模糊了（这点要注意，解决办法就是上一个效果的描述那样）。
HTML布局稍微变了一下：
<div class="bg">
<div class="drag">
<div>like window</div>
</div>
</div>
css代码如下：（大家注意对比）
/*背景局部模糊*/
.bg{
width:100%;
height:100%;
background: url(?css/"../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;
}
效果如下：
背景局部清晰
背景局部清晰这个效果说简单也不简单，说难也不难。关键还是要应用好background:inherit属性。这里可不能使用transform让它垂直居中了，大家还是选择flex布局吧。如果这里再使用transform属性的话会让背景也偏移的。这样就没有局部清晰的效果了。
html布局不变，
注意看css的变化：
/*背景局部清晰*/
.bg{
width:100%;
height:100%;
position: relative;
background: url(?css/"../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实现背景图片半透明内容不透明的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2021-04-13- 这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-04-13
这篇文章主要介绍了css3实现的加载动画效果，帮助大家更好的利用css3制作网页，感兴趣的朋友可以了解下2021-04-07
这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-29- 这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-03-09
圆形透明画中画视频播放特效是一款基于css3制作的创意透明圆形层mp4视频播放特效代码。2020-12-17
JS+CSS3文章内容背景黑白切换特效代码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。2020-11-27
这篇文章主要介绍了css3实现简单的白云飘动背景特效的示例，帮助大家制作网页特效，美化自己的网站，感兴趣的朋友可以了解下2020-10-28
这篇文章主要介绍了CSS3 实现的动态星空背景的示例代码，帮助大家更好的理解和学习制作CSS3特效，感兴趣的朋友可以了解下2021-04-22
最新评论