使用 CSS's mask-image 屬性為圖片套用特效

您可以使用 CSS 遮罩功能，將圖片做為遮罩層。也就是說，您可以使用圖片、可擴充向量圖形或漸層做為遮罩，在不需要圖片編輯器的情況下，創造有趣的效果。

Rachel Andrew

使用 clip-path 屬性剪輯元素時，系統會隱藏已剪輯的區域。如果您想讓圖片的某部分變成不透明，或套用其他效果，則必須使用遮罩。本文將說明如何在 CSS 中使用 mask-image 屬性，讓您指定要用於遮罩圖層的圖片。您有三個選項：您可以使用圖片檔案做為遮罩、SVG 或漸層。

瀏覽器相容性

大多數瀏覽器只支援部分標準 CSS 遮罩屬性。為了達到最佳瀏覽器相容性，您必須使用標準屬性和 -webkit- 前置字串。如需完整的瀏覽器支援資訊，請參閱「我可以使用 CSS 遮罩嗎？」。

瀏覽器支援

• 120
• 120
• 53
• 15.4

資料來源

雖然瀏覽器支援使用前置字串的屬性也一樣，但使用遮罩讓圖片上方顯示文字時，可處理無法使用遮罩時會發生的情況。建議您使用功能查詢來偵測 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 漸層做為遮罩，是一種簡單的方式，可建立遮罩區域，而無須費心建立圖片或 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 上的相片。