在做一些页面的时候,为了让页面更好看,我们常常需要设置一些背景图片,但是,当背景图片太过花哨的时候,又会影响我们的主体内容,所以我们就需要用到 filter 属性来设置他的模糊值。
html代码如下
JS Bin我是需要突出显示的内容
但是如果直接在背景图片上使用的话,
.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设置背景模糊的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!