css实现图片虚化_css怎么虚化背景图片？css虚化背景图片的方法介绍

在看到背景图片虚化的时候，我相信很多朋友都会想到去用ps去实现这个效果，那么用css能实现背景图片的虚化效果吗？接下来的这篇文章就来给大家介绍一下css设置背景图片虚化的方法。

在虚化背景时使用的是filter属性，我们就是利用filter属性中blur来设置虚化背景的。

代码如下：

img {

filter: blur(5px);

}

css虚化背景的效果如下：

上述这个方法只是简单的利用css将背景图片虚化，下面我们来看看稍微复杂一点的方法，当然也是利用filter属性

代码如下：

.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;