如何使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果

這篇文章主要介紹如何使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、需求描述

某元素，希望 background-image 背景圖片是半透明的，但是，元素里面的其他內(nèi)容，例如文字，圖標(biāo)之類(lèi)的還是不透明。

如果是純色背景或者是CSS漸變背景，很好處理，使用 rgba 或者 hsla 顏色色值即可。

但是，如果是 url() 背景圖像，似乎就無(wú)能為力了。

如果是個(gè)內(nèi)聯(lián)的 <img> 圖像那很好處理，無(wú)論是filter濾鏡、 mask遮罩 還是 opacity 透明度設(shè)置都可以實(shí)現(xiàn)我們的效果，但是偏偏這里是背景圖像，所有前面提到的這些方法都會(huì)影響文字的正常顯示。

我估計(jì)很多人會(huì)想到使用 ::before / ::after 偽元素實(shí)現(xiàn)，例如：

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

實(shí)時(shí)效果如下（如果沒(méi)有效果請(qǐng)?jiān)L問(wèn)原文 作者張?chǎng)涡?）：

by-zhangxinxu

但是這個(gè)方法太啰嗦，成本太高（創(chuàng)建了大量的層疊上下文、尺寸是不是需要調(diào)整），無(wú)法大規(guī)模使用。

有沒(méi)有什么好的實(shí)現(xiàn)方法呢？

試試使用 cross-fade() 圖像函數(shù)。

二、cross-fade()實(shí)現(xiàn)背景圖像半透明

cross-fade() 函數(shù)可以讓兩張圖像半透明混合。

例如：

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

就會(huì)有下圖所示的效果。

2.jpg 這張圖以50%的透明度和 1.jpg 進(jìn)行了混合渲染。

上面案例使用的是 cross-fade() 函數(shù)的傳統(tǒng)語(yǔ)法，具體如下：

<dfn id="ltimage-combination">
<image-combination>
</dfn> = cross-fade( <image>, <image>, <percentage> )

其中 <percentage> 指的是透明度，只會(huì)改變第2個(gè)圖像的透明度，最終的效果是第1個(gè)圖像完全不透明和第2個(gè)圖像半透明疊加的效果。

關(guān)于 cross-fade() 圖像函數(shù)中的百分比值改變的僅僅是后面一個(gè)圖像的透明度，我很久以前做過(guò)一個(gè)demo頁(yè)面進(jìn)行過(guò)測(cè)試，您可以狠狠地點(diǎn)擊這里： CSS3 cross-fade屬性透明度作用對(duì)象測(cè)試

示意截圖如下：

雖然 cross-fade() 函數(shù)設(shè)計(jì)的初衷是多個(gè)圖像半透明疊加，但是，這樣的場(chǎng)景實(shí)際開(kāi)發(fā)很少遇到，因此， cross-fade() 反而更適合控制單個(gè)背景圖像的半透明效果。

實(shí)現(xiàn)原理很簡(jiǎn)單，第1張圖使用透明圖片，第2張圖使用目標(biāo)圖片就可以了。

舉個(gè)例子：

某背景圖在黑暗模式下太亮了，希望調(diào)整下背景圖的明暗度，使用 cross-fade() 函數(shù)實(shí)現(xiàn)就是下面這段CSS代碼（寬高設(shè)置的CSS略）：

.dark {
    /* 兜底，IE和Firefox瀏覽器 */
    background-image: url(2.jpg);
    --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    /* Safari最近版本已經(jīng)不需要私有前綴了 */
    background-image: cross-fade(var(--transparent), url(2.jpg), 40%);
    /* 如使用自定義屬性，-webkit-語(yǔ)句需要放在沒(méi)有私有前綴語(yǔ)句的下面 */
    background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

    background-size: cover;
}

效果如下：

是不是很簡(jiǎn)單，是不是比偽元素實(shí)現(xiàn)要靠譜的多，對(duì)應(yīng)的demo訪問(wèn) 這里 。

cross-fade() 本質(zhì)上就是個(gè) <image> 圖像數(shù)據(jù)類(lèi)型，和 url() 圖像，gradient漸變圖像，image-set()函數(shù)是一個(gè)性質(zhì)，可以用在 border-image , mask-image 等屬性中。

因此，使用 cross-fade() 函數(shù)替換 url() 函數(shù)實(shí)現(xiàn)背景圖片的半透明效果決定是成本最低，效果最好的方法。

三、移動(dòng)端兼容性極佳

cross-fade() 函數(shù)webkit瀏覽器支持的非常早，iOS 5，Android 4.4均支持，只不過(guò)需要設(shè)置私有前綴，具體如下圖所示：

因此，在移動(dòng)端可以放心使用，至于PC端，不需要考慮IE瀏覽器的項(xiàng)目也是可以放心使用的，就算需要考慮IE也沒(méi)毛病，不過(guò)就是背景圖還是完全不透明而已，視覺(jué)體驗(yàn)稍微低了一點(diǎn)而已。

這世界上沒(méi)有所謂的沒(méi)有用的CSS屬性，只是沒(méi)有遇到合適的場(chǎng)景而已；就像依然單身的諸位，只是還沒(méi)有遇到合適的那個(gè)他/她而已。

另外， cross-fade() 函數(shù)加入CSS規(guī)范后有了新的語(yǔ)法，更靈活更強(qiáng)大，但是目前沒(méi)有任何瀏覽器支持，因此本文沒(méi)有做相關(guān)介紹。

以上是“如何使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！