一、需求描述

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

如果是純色背景或者是CSS漸變背景，很好處理，使用rgba或者h(yuǎn)sla顏色色值即可。

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

如果是個(gè)內(nèi)聯(lián)的圖像那很好處理，無論是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í)效果如下(如果沒有效果請(qǐng)?jiān)L問原文 作者張?chǎng)涡?：

by-zhangxinxu

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

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

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

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

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

例如：

.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)語法，具體如下：

= cross-fade( , , )

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

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

示意截圖如下：

雖然cross-fade()函數(shù)設(shè)計(jì)的初衷是多個(gè)圖像半透明疊加，但是，這樣的場(chǎng)景實(shí)際開發(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-語句需要放在沒有私有前綴語句的下面 */

background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

background-size: cover;

}

效果如下：

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

cross-fade()本質(zhì)上就是個(gè)圖像數(shù)據(jù)類型，和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均支持，只不過需要設(shè)置私有前綴，具體如下圖所示：

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

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

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

以上就是本文內(nèi)容，感謝閱讀，如果你覺得內(nèi)容還不錯(cuò)，歡迎分享，分享與分享。

讓有用的知識(shí)惠及更多的人。

本文為原創(chuàng)文章，歡迎分享，勿全文轉(zhuǎn)載，如果實(shí)在喜歡，可收藏，永不過期，且會(huì)及時(shí)更新知識(shí)點(diǎn)及修正錯(cuò)誤，閱讀體驗(yàn)也更好。

本文地址：https://www.zhangxinxu.com/wordpress/?p=9489

(本篇完)

總結(jié)

以上是生活随笔為你收集整理的html背景图片半透明遮罩,巧用CSS cross-fade()实现背景图像半透明效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。