关于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个图像半透明叠加的成果。