html背景图片半透明遮罩,巧用CSS cross-fade()实现背景图像半透明效果

一、需求描述

某元素，希望background-image背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。

如果是纯色背景或者是CSS渐变背景，很好处理，使用rgba或者hsla颜色色值即可。

但是，如果是url()背景图像，似乎就无能为力了。

如果是个内联的图像那很好处理，无论是filter滤镜、mask遮罩还是opacity透明度设置都可以实现我们的效果，但是偏偏这里是背景图像，所有前面提到的这些方法都会影响文字的正常显示。

我估计很多人会想到使用::before/::after伪元素实现，例如：

.box {

position: relative;

z-index: 0;

}

.box::before {

content: '';

position: absolute;

left: 0; right: 0; top: 0; bottom: 0;

background: url(xxx.jpg) no-repeat center / contain;

z-index: -1;

opacity: .5;

}

实时效果如下(如果没有效果请访问原文 作者张鑫旭)࿱