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

就会有下图所示的效果。

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

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

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

其中<percentage>指的是透明度，只会改变第2个图像的透明度，最终的效果是第1个图像完全不透明和第2个图像半透明叠加的效果。