CSS设置背景模糊的实现方法
发布时间：2018-10-22 14:40:28 作者：佚名 
我要评论
我要评论这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。
html代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="cover"> <h1>我是需要突出显示的内容 </div> </body> </html>
但是如果直接在背景图片上使用的话，
.cover{
width:600px;
height:300px;
position:relative;
text-align:center;
line-height:300px;
color:white;
background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;
filter:blur(5px);
background-size:cover;
}
可能会造成下面的这种情况。
我们会发现背景和主体内容都变糊了。
解决办法：给背景图片增加一个伪元素，将背景图片和 filter 属性设置在伪元素上，具体代码如下
.cover{
width:600px;
height:300px;
position:relative;
text-align:center;
line-height:300px;
color:white;
}
.cover::before{
content:'';
position:absolute;
top:0;
left:0;
width:600px;
height:300px;
background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;
filter:blur(5px);
z-index:-1;
background-size:cover;
}
总结
以上所述是小编给大家介绍的CSS设置背景模糊的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！
相关文章
最近做项目遇到这样的需求一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。具体解决方法大家参考下本文2017-07-24
这篇文章主要介绍了css3实现背景模糊的三种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-05-15
最新评论