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。
達成這個目標有幾種方式：
首先，您必須在 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 漸層做為遮罩，是流暢達成遮罩區域的絕佳方式，還能省去製作圖片或可擴充向量圖形的麻煩。
舉例來說，就算將簡單的線性漸層當成遮罩使用，圖片的底部部分也不會太暗。
您可以使用任何支援的漸層類型，然後視需要發揮創意。 下例是使用放射漸層來建立圓形遮罩，在字幕後方加上光亮。
使用多個遮罩
如同背景圖片，您可以指定多個遮罩來源 只要合併這些圖片，就能獲得想要的效果 如要使用 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;
把漸層圖案套用到圖片上可以做一些真正很棒的效果。 請嘗試重混 The Glitch 並測試其他變化版本。
除了剪輯外 您不必使用圖形應用程式，即可透過 CSS 遮罩增加圖片和其他 HTML 元素的興趣。
相片來源：Julio Rionaldo 在 Unsplash 上。