欢迎访问生活随笔！
TAG聚合

生活随笔

您现在的位置是：首页 > 形式科学 > 计算机科学 > IT网络

IT网络

css背景图像的模糊效果

发布时间：2022-11-14IT网络 次 小博士
转载:http://blog.csdn.net/ohehehou/article/details/51975539
要求:一个div已经设置了background: url，现在你需要模糊图片背景，D

转载地址：http://blog.csdn.net/ohehehou/article/details/51975539

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

原始代码：

<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <style type='text/css'> .content { color: #ffffff; font-size: 40px; } .bg { background: url('1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; height:600px; text-align: center; line-height: 600px; } </style> </head> <body> <div class='bg'> <div class='content'>我是内容</div> </div> </body> </html>

原始效果：

css 背景图片虚化效果-风君子博客

解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。

html代码：

<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <style type='text/css'> .content { color: #ffffff; font-size: 40px; } .bg { background: url('1.jpg'); height:600px; text-align: center; line-height: 600px; } .bg-blur { float: left; 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } .content-front { position:absolute; left: 10px; right: 10px; height:600px; line-height: 600px; text-align: center; } </style> </head> <body> <div> <div class='bg bg-blur'></div> <div class='content content-front'>我是内容</div> </div> </div> </body> </html>

效果：
css 背景图片虚化效果-风君子博客


注：相似的效果可以通过以上的代码改进而来

效果 我是 内容 图片