您现在的位置是：网站首页> 编程资料编程资料
CSS设置背景图片模糊内容不模糊的解决方法_CSS教程_CSS_网页制作_
2021-09-10
1110人已围观
简介 最近做项目遇到这样的需求一个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-image的用法_css3_CSS_网页制作_
- 纯CSS实现气泡对话框尖角处理方案_CSS教程_CSS_网页制作_
- css position定位属性_动力节点Java学院整理 _CSS教程_CSS_网页制作_
- css float属性_动力节点Java学院整理 _CSS教程_CSS_网页制作_
- css id选择器使用_动力节点Java学院整理 _CSS教程_CSS_网页制作_
- css简介_动力节点Java学院整理_CSS教程_CSS_网页制作_
- CSS深入教程之文字修饰的那点事_CSS教程_CSS_网页制作_
- 利用纯CSS3实现文字向右循环闪过效果实例（可用于移动端） _css3_CSS_网页制作_
- CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集_css3_CSS_网页制作_
