css 背景图片虚化

项目中需要实现一个背景图片虚化的需求

这里使用了两个div来实现,主要还是图层的覆盖,第一层使用了filter来虚化,第二层直接盖上

1. 公共布局(使用less的when进行了条件判断,应该有更好的解决方案)

.layoutImportant(@left:50%,@height:100%,@width:100%,@transform:-50%,@backgroundImg) when(isstring(@backgroundImg)){
    position: absolute;
    background-image: url(@backgroundImg);
    background-size: cover;
    height: @height;
    width:@width;
    left: @left;
    transform: translateX(@transform);
}
.layoutImportant(@left:50%,@height:100%,@width:100%,@transform:-50%,@backgroundImg) when(@backgroundImg=null){
    position: absolute;
    background-image: unset;
    background-size: cover;
    height: @height;
    width:@width;
    left: @left;
    transform: translateX(@transform);
}

2. 需要虚化的背景图片

.backgroundimg{
        .layoutImportant(@height:80%,@width:87.8%,@backgroundImg:"xxx");
        bottom: 6.8%;
        filter: blur(15px); // 虚化的程度
        z-index: 0; // 层级
    }

3. 放主要内容的div

.content {
        .layoutImportant(@height:80%,@width:87.8%,@backgroundImg:null);
        bottom: 6.8%;
        z-index: 99; // 层级
        }

tip

在样式调整过程中,遇到不可点击图标的情况是因为图层被覆盖了,添加 z-index属性即可解决