200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Html设置背景图模糊 CSS设置背景图片模糊内容不模糊的解决方法

Html设置背景图模糊 CSS设置背景图片模糊内容不模糊的解决方法

时间:2022-11-07 22:39:40

相关推荐

Html设置背景图模糊 CSS设置背景图片模糊内容不模糊的解决方法

需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。

解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置,实质上是在底层加了一个div,给这个div设置模糊了。

这里面是清晰的内容

.banner_bg{

width:100%;

background-repeat:no-repeat;

background-size:cover;

-webkit-filter:blur(15px);

-moz-filter:blur(15px);

-o-filter:blur(15px);

-ms-filter:blur(15px);

filter:blur(15px);

position:absolute;

left:0;

top:0;

}

总结

以上所述是小编给大家介绍的CSS设置背景图片模糊内容不模糊的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。