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);
}
![可擴充向量圖形遮罩的使用示例](https://web.dev/static/articles/css-masking/image/an-example-using-svg-ma.jpg?authuser=7&hl=zh-tw)
這種方法的優點是,遮罩可套用至任何 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 上。