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