关于css:CSS-crossfade实现背景图像半透明效果

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%);   
}

就会有下图所示的成果。

2.jpg这张图以 50% 的透明度和 1.jpg 进行了混合渲染。

下面案例应用的是 cross-fade() 函数的传统语法，具体如下：

<image-combination> = cross-fade(<image>, <image>, <percentage>)

其中 <percentage> 指的是透明度，只会扭转第 2 个图像的透明度，最终的成果是第 1 个图像齐全不通明和第 2 个图像半透明叠加的成果。