您现在的位置是：网站首页> 编程资料编程资料

CSS设置背景图片模糊内容不模糊的解决方法_CSS教程_CSS_网页制作_

2023-11-05 198人已围观

简介 最近做项目遇到这样的需求一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。具体解决方法大家参考下本文

需求：一个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设置背景图片模糊内容不模糊的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：CSS学习笔记之可重复渐变（repeating-linear-gradient）_CSS教程_CSS_网页制作_

下一篇：css3 border-radius属性详解_css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网