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

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

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

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

瀏覽器支援

  • Chrome:120。
  • Edge:120。
  • Firefox:53。
  • Safari: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 相同。您可以使用關鍵字 covercontain,也可以使用任何有效長度單位或百分比為背景指定大小。

您也可以重複遮罩,就像重複背景圖片一樣,以便將小圖片做為重複圖案使用。

使用 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);
}
使用 SVG 遮罩的範例

這種做法的優點是,遮罩可套用至任何 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 上的相片