一、需求描述

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

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

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

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

我估計很多人會想到使用::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;

}

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

by-zhangxinxu

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

有沒有什么好的實現方法呢？

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

二、cross-fade()實現背景圖像半透明

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

例如：

.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()函數的傳統語法，具體如下：

= cross-fade( , , )

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

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

示意截圖如下：

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

實現原理很簡單，第1張圖使用透明圖片，第2張圖使用目標圖片就可以了。

舉個例子：

某背景圖在黑暗模式下太亮了，希望調整下背景圖的明暗度，使用cross-fade()函數實現就是下面這段CSS代碼(寬高設置的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;

}

效果如下：

是不是很簡單，是不是比偽元素實現要靠譜的多，對應的demo訪問這里。

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

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

三、移動端兼容性極佳

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

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

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

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

以上就是本文內容，感謝閱讀，如果你覺得內容還不錯，歡迎分享，分享與分享。

讓有用的知識惠及更多的人。

本文為原創文章，歡迎分享，勿全文轉載，如果實在喜歡，可收藏，永不過期，且會及時更新知識點及修正錯誤，閱讀體驗也更好。

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

(本篇完)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。