您可以使用 CSS 遮罩功能，將圖片做為遮罩層。也就是說，您可以使用圖片、可擴充向量圖形或漸層做為遮罩，在不需要圖片編輯器的情況下，創造有趣的效果。
使用 clip-path 屬性剪輯元素時，系統會隱藏已剪輯的區域。如果您想讓圖片的某部分變成不透明，或套用其他效果，則必須使用遮罩。本文將說明如何在 CSS 中使用 mask-image 屬性，讓您指定要用於遮罩圖層的圖片。您有三個選項：您可以使用圖片檔案做為遮罩、SVG 或漸層。
瀏覽器相容性
雖然 CSS 遮罩功能是新版基準，但 mask-image 的大部分功能在使用前置 -webkit-mask-image 的舊版瀏覽器時也適用。以下範例說明如何同時使用這兩個屬性，以便獲得最佳瀏覽器支援。
使用圖片遮罩
mask-image 屬性的運作方式與 background-image 屬性類似。使用 url() 值傳入圖片。遮罩圖片必須包含透明或半透明區域。
完全透明的區域會導致圖片中該區域下方的部分區域無法顯示。不過，使用半透明區域可讓部分原始圖片顯示。您可以在下列 CodePen 中查看差異。
- 第一個圖片是未經過處理的氣球圖片。
- 第二張圖片已套用遮罩，在完全透明的背景上顯示白色星星。
- 第三張圖片的背景是漸層透明效果，上頭有一個白色星星。
這個範例也使用 mask-size 屬性，值為 cover。這個屬性的運作方式與 background-size 相同。使用關鍵字 cover 和 contain，或是使用任何有效的長度單位或百分比來指定背景大小。
您也可以重複遮罩，就像重複背景圖片一樣，以便將小圖片做為重複圖案使用。
使用 SVG 遮罩
您可以使用 SVG 做為遮罩，而非圖片檔案。您可以透過幾種方式達成這項目標。第一種方法是在 SVG 中加入 <mask> 元素，並在 mask-image 屬性中參照該元素的 ID。
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
這種做法的優點是，遮罩可套用至任何 HTML 元素，而非僅限於圖片。
在最常見的遮罩圖片情境中，您可以改為在 SVG 中加入圖片。第一個方法是使用基準新功能，包括支援 -webkit 前置字元的舊版瀏覽器支援的 SVG 圖片。
含有漸層的遮罩
使用 CSS 漸層做為遮罩，是一種簡單的方式，可建立遮罩區域，而無須費心建立圖片或 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;
您可以為圖片套用漸層圖案，創造出非常棒的效果。請分支下列 CodePen，測試其他變化版本。
除了裁剪之外，CSS 遮罩也是一種方法，可為圖片和其他 HTML 元素增添趣味，而且不需要使用圖形應用程式。