很多时候做项目的时候,我们都会遇到背景模糊的问题,这个时候我们的内容也就跟着一起模糊,小编今天亲测了解决方案。

未解决之前

解决之后

如下附上代码:

.div-img{
        width: 520px;
        height: 420px;
        position: relative;
        text-align: center;
        line-height: 420px;
    }
    .div-img::after{
        width: 520px;
        height: 420px;
        top:0;
        left: 0;
        content: '';
        position: absolute;
        z-index:-1;
        background-size: cover;
        background:transparent url('image/ww.jpg') no-repeat;
        filter: blur(3px);
    }

演示地址