一、需求描述

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

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

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

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

我估計很多人會想到使用 ::before / ::after 偽元素實現(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;
}

實時效果如下（如果沒有效果請訪問原文 作者張鑫旭 ）：

by-zhangxinxu

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

有沒有什么好的實現(xiàn)方法呢？

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

二、cross-fade()實現(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%);   
}

就會有下圖所示的效果。

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

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

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

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

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

示意截圖如下：

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

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

舉個例子：

某背景圖在黑暗模式下太亮了，希望調(diào)整下背景圖的明暗度，使用 cross-fade() 函數(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-語句需要放在沒有私有前綴語句的下面 */
    background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

    background-size: cover;
}

效果如下：

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

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

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

三、移動端兼容性極佳

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

因此，在移動端可以放心使用，至于PC端，不需要考慮IE瀏覽器的項目也是可以放心使用的，就算需要考慮IE也沒毛病，不過就是背景圖還是完全不透明而已，視覺體驗稍微低了一點而已。

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

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

到此這篇關(guān)于使用CSS cross-fade()實現(xiàn)背景圖像半透明效果的示例代碼的文章就介紹到這了,更多相關(guān)CSS cross-fade()背景圖像半透明內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論