摘要：
实现图像半透明的方法挺多，无论是filter滤镜、mask遮罩、opacity透明度设置都可以实现要用background-image背景图片实现的话，可能第一个就会想到使用::before、::after伪元素实现，例如：.box{position:relative;z-index:0;}.box::before{content:'';position:absolute;left:0;right
实现图像半透明的方法挺多，无论是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; }