CSS 遮罩可讓您選擇使用圖片做為遮罩圖層。也就是說，您可以使用圖片、SVG 或漸層做為遮罩，在不使用圖片編輯器的情況下創造出有趣的效果。
使用 clip-path 屬性裁剪元素時，裁剪的區域會變成不顯示。如果您想讓圖片變成不透明的一部分，或對圖片套用其他效果，則必須使用遮罩。
本文說明如何在 CSS 中使用 mask-image 屬性，進而指定要使用的圖片做為遮罩圖層。為您提供三種選項。您可以使用圖片檔做為遮罩、SVG 或漸層。
瀏覽器相容性
大多數瀏覽器都僅支援標準 CSS 遮蓋屬性的部分。
除了標準屬性以外，您還需要使用 -webkit- 前置字元，以達到最佳的瀏覽器相容性。
如需完整的瀏覽器支援資訊，請參閱「我可以使用 CSS 遮罩嗎？」一文。
雖然瀏覽器支援使用加上前置字串的屬性是不錯的做法，但使用遮罩將文字放在圖片上方時，可以確實處理無法使用遮罩功能的情況。建議您在新增遮蓋版本前，使用功能查詢偵測對 mask-image 或 -webkit-mask-image 的支援，並提供可讀取的備用方案。
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
圖片遮罩
mask-image 屬性的運作方式與 background-image 屬性類似。使用 url() 值傳入圖片。遮罩圖片必須有透明或半透明區域。
完全透明的區域會導致圖片下的部分區域不顯示。使用半透明的區域仍可顯示部分原始圖片。 您可以在下方的「Glitch」中查看差異。第一張圖片顯示未經遮罩的氣球原始圖片。 第二張圖片套用了遮罩，背景全透明具有白色星號。第三張圖片在背景有漸層透明度的背景。
在本範例中，我同時使用 mask-size 屬性和 cover 值。這個屬性的運作方式與 background-size 相同。您可以使用 cover 和 contain 關鍵字，也可以使用任何有效的長度單位或百分比來指定背景的大小。
您也可以重複套用背景圖片，藉此使用小圖片做為重複圖案。
使用可擴充向量圖形進行遮蓋
如果不使用圖片檔做為遮罩，則可使用 SVG。
有幾種方法可以達到這個目標。首先，在 SVG 內加入 <mask> 元素，然後在 mask-image 屬性中參照該元素的 ID。
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
這種做法的優點是，遮罩可套用至任何 HTML 元素，而不只是圖片。很抱歉，Firefox 是唯一支援這個方法的瀏覽器。
不過，所有資料都不會遺失，因為最常見的圖片遮蓋情況，我們可將圖片加入 SVG 中。
使用漸層效果遮蓋
使用 CSS 漸層做為遮罩的優雅方式，能讓您輕鬆達成遮罩區域，而不需費心建立圖片或 SVG。
舉例來說，遮罩為簡單的線性漸層，可確保圖片底部在說明文字下方不會太暗。
您可以使用系統支援的任何漸層類型，並且視需要發揮創意。 下一個範例使用放射漸層，建立在說明文字後面亮起的圓形遮罩。
使用多個遮罩
如同背景圖片，您可以指定多個遮罩來源，並合併這些來源，藉此達到想要的效果。如果您想使用以 CSS 漸層產生的模式做為遮罩，這個方法就特別實用。 這類影片通常會使用多張圖片，因此可輕鬆翻譯成遮罩。
例如，我在這篇文章中找到了不錯的棋盤模式。 使用背景圖片的程式碼如下所示：
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
如要將這個值或任何其他專為背景圖片設計的圖案設為遮罩，您需要將 background-* 屬性替換為相關的 mask 屬性，包括前置字串為 -webkit 的屬性。
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
為圖片套用漸層模式後，效果會相當不錯。 你也可以嘗試重混 Glitch，並測試其他變化版本。
除了裁剪內容，CSS 遮罩也能讓圖片和其他 HTML 元素更具吸引力，而不需使用圖形應用程式。
相片由 Julio Rionaldo 於 Unsplash 上提供。