当前位置： > 手游资讯 > 游戏攻略 > 背景虚化(css怎么虚化背景图片？css虚化背景图片的方法介绍)

背景虚化(css怎么虚化背景图片？css虚化背景图片的方法介绍)

作者：哪吒游戏网来源：哪吒游戏网 2020-11-15 10:01:23

背景虚化(css怎么虚化背景图片？css虚化背景图片的方法介绍)，哪吒游戏网给大家带来详细的背景虚化(css怎么虚化背景图片？css虚化背景图片的方法介绍)介绍，大家可以阅读一下，希望这篇背景虚化(css怎么虚化背景图片？css虚化背景图片的方法介绍)可以给你带来参考价值。

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

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

代码如下：




<style>
img {
    filter: blur(5px);
}
</style>

<body>

css虚化背景的效果如下：

2345截图20181026140821.png

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

代码如下：




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

<body>

        
          图片上面的文字内容

背景图片虚化效果如下：

2345截图20181026141812.png