css如何虚化背景图片？css虚化背景图片的办法介绍
时间：2024/10/11作者：未知来源：手揣网教程人气：
- [摘要]在看到背景图片虚化的时候，我相信很多朋友都会想到去用ps去实现这个效果，那么用css能实现背景图片的虚化效果吗？接下来的这篇文章就来给大家介绍一下css设置背景图片虚化的方法。在虚化背景时使用的是f...在看到背景图片虚化的时候，我相信很多朋友都会想到去用ps去实现这个效果，那么用css能实现背景图片的虚化效果吗？接下来的这篇文章就来给大家介绍一下css设置背景图片虚化的方法。
在虚化背景时使用的是filter属性，我们就是利用filter属性中blur来设置虚化背景的。
代码如下：
<!DOCTYPE html> <html> <head> <style> img { filter: blur(5px); } </style> </head> <body> <img src="image/girl.jpg" alt="girl" width="300" height="300"> </body> </html>css虚化背景的效果如下：
上述这个方法只是简单的利用css将背景图片虚化，下面我们来看看稍微复杂一点的方法，当然也是利用filter属性
代码如下：
<!DOCTYPE html> <html> <head> <style> .mbl { width: 20em; height: 20em; background: url(image/girl.jpg); background-size: cover; overflow: hidden; margin: 30px; } .text { width: 18em; height: 18em; margin: 1em; background: hsla(0, 0%, 100%, .4); color: black; text-align: center; overflow: hidden; position: relative; } .text::before { position: absolute; background: url(image/girl.jpg); background-size: cover; top: 0; right: 0; bottom: 0; left: 0; content: ''; filter: blur(4px); /* background: rgba(225, 0, 0, 0.5);*/ } .text p { height: inherit; width: inherit; display: table-cell; vertical-align: middle; position: relative; } </style> </head> <body> <div class="mbl"> <div class="text"> <p>图片上面的文字内容</p> </div> </div> </body> </html>背景图片虚化效果如下：
说明：上述代码主要就是将要设置虚化背景的地方通过伪元素设置背景颜色或图片，利用区域relative定位和伪元素absolute定位这样才能让伪元素的大小完全等于本来区域的大小，然后用blur滤镜进行虚化处理，就会想上面的效果那样。
本篇文章到这里就全部结束了，更多精彩的内容大家可以关注php中文网的相关教程栏目！！！
以上就是css怎么虚化背景图片？css虚化背景图片的方法介绍的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：css怎样虚化背景图片？css虚化背景图片的办法介绍