css cross-fade()实现背景图像半透明效果

实现图像半透明的方法挺多，无论是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;
}