css 背景图片虚化

css 背景图片虚化

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

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

公共布局(使用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);}

需要虚化的背景图片

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

放主要内容的div

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

tip

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