实现图像半透明的方法挺多，无论是filter滤镜、mask遮罩、opacity透明度设置都可以实现
要用background-image背景图片实现的话，可能第一个就会想到使用::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; }
其实，还可以使用cross-fade()实现
cross-fade()函数可以让两张图像半透明混合
<div class="cross-fade-image"></div> .cross-fade-image { width: 300px; height: 300px; background: no-repeat center / contain; background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%); background-image: cross-fade(url(1.jpg), url(2.jpg), 50%); }
语法如下：
<image-combination> = cross-fade( <image>, <image>, <percentage> )
调整下背景图的明暗度，使用cross-fade()函数实现就是下面这段CSS代码
.dark { /* 兜底，IE和Firefox浏览器 */ background-image: url(2.jpg); --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Safari最近版本已经不需要私有前缀了 */ background-image: cross-fade(var(--transparent), url(2.jpg), 40%); /* 如使用自定义属性，-webkit-语句需要放在没有私有前缀语句的下面 */ background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%); background-size: cover; }