mask-image
mask-image CSS 屬性設定用作元素蒙版層的影像，根據蒙版影像的 alpha 通道以及（取決於 mask-mode 屬性值）蒙版影像顏色的亮度來隱藏元素上的部分割槽域。
語法
/* Keyword value */
mask-image: none;
/* <mask-source> value */
mask-image: url("masks.svg#mask1");
/* <image> values */
mask-image: linear-gradient(black, transparent);
mask-image: image(url("mask.png"), skyblue);
/* Multiple values */
mask-image: url("mask.png"), linear-gradient(black 25%, transparent 35%);
/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
值
none-
此關鍵字被解釋為透明黑色影像層。
<mask-source><image>-
用作蒙版影像層的影像值。
描述
mask-image 屬性提供了一個蒙版，用於隱藏應用它的元素的一部分。該值是一個逗號分隔的蒙版引用列表。每個蒙版引用是一個 <image>、一個 <mask-source> 或關鍵字 none。
<image> 可以是任何型別的影像，包括生成的影像，例如 CSS 漸變。
如果在 mask-image 屬性值中只指定了一個值，並且該值為 none，則不會出現任何蒙版效果。如果指定了多個值，列表中包含的 none 值可能沒有直接影響，但是，同一列表位置中的其他 mask-* 值將應用於透明黑色蒙版層，並且沒有視覺效果。
由於 CORS 策略，只有透過 HTTP 和 HTTPS 協議提供的影像源才被接受為 <image> 值。本地提供的影像（包括相對或絕對的 file:// 協議）不被接受，並將呈現為透明黑色。要在本地測試 URL 影像源，請設定本地伺服器。
在以下情況下，蒙版將被視為透明黑色影像層，不顯示任何內容：
- 蒙版影像為空（零寬度或零高度）。
- 蒙版影像下載失敗。
- 瀏覽器不支援蒙版影像格式。
- 蒙版影像不存在。
- 蒙版值未指向蒙版影像。
mask-mode 屬性的預設值是 match-source，這意味著模式由蒙版影像本身的模式定義。蒙版影像的模式通常是 alpha，除非蒙版源是 SVG <mask> 元素，在這種情況下模式是 luminance，除非透過 CSS mask-type 屬性或 SVG mask-type 屬性將模式更改為 alpha。
mask-mode 值很重要，因為它決定了蒙版效果是僅取決於影像源的 alpha 通道值，還是取決於這些值與蒙版亮度的組合（構成 mask-image 的顏色的亮度/暗度）
- 在所有情況下，蒙版的 alpha 透明度都很重要；被
mask-image不透明部分遮罩的元素區域將呈現，而被透明影像部分遮罩的區域將被隱藏。 - 當
mask-mode值設定為或解析為alpha時，只有顏色的 alpha 通道很重要；色相、亮度等都不重要。 - 如果
mask-mode屬性設定為或預設為luminance，則蒙版值是每個顏色的亮度值乘以其 alpha 值。如果顯式設定為該值，或者如果該屬性設定為match-source並且mask-image源是 SVG<mask>且未顯式將其mask-type屬性或mask-type屬性設定為alpha，則mask-mode將解析為luminance。
正式定義
正式語法
mask-image =
<mask-reference>#
<mask-reference> =
none |
<image> |
<mask-source>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<mask-source> =
<url>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
漸變作為蒙版影像
在此示例中，我們使用 <image> 值作為蒙版，將 CSS 徑向漸變 定義為蒙版影像，以建立具有柔和邊緣的圓形影像。
HTML
我們包含了一個 HTML <img> 元素，該元素也將用於所有其他示例。
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
CSS
我們使用 CSS radial-gradient() 函式建立一個蒙版，該蒙版具有一個黑色圓形，其半徑是蒙版寬度的一半，然後過渡到在 10% 範圍內變為透明。
img {
mask-image: radial-gradient(black 50%, transparent 60%);
}
結果
原始元素中被黑色圓形遮罩的部分是完全不透明的，隨著蒙版逐漸變為透明而逐漸變為透明。
影像資源作為蒙版影像
在此示例中，用作蒙版影像的 <mask-source> 是一個外部 SVG。
HTML
我們包含與上一個示例相同的影像。我們還包含了將用作蒙版的影像；一顆星，其 fill-opacity 為 0.5，即 50% 不透明。
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<img
src="https://mdn.github.io/shared-assets/images/examples/mask-star.svg"
alt="A star" />
CSS
我們在第一個影像上使用 mask-star.svg 作為蒙版影像。
img:first-of-type {
mask-image: url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
}
結果
蒙版是半透明的，這就是為什麼顏色不如上一個示例鮮豔的原因。影像中可見的部分是 50% 不透明的；即應用的蒙版的不透明度。蒙版比影像小，因此預設情況下會重複。我們可以使用 mask-repeat 來控制重複，或者使用 mask-size 來改變蒙版的大小，我們將在下一個示例中這樣做。
多個蒙版
此示例演示了應用多個蒙版。
CSS
我們應用了兩個蒙版——與上一個示例中相同的半透明 SVG，以及一個 repeating-radial-gradient()。我們使用 mask-size 屬性控制蒙版的大小。由於我們的第一個蒙版未設定為 100% 的大小，我們確保我們的蒙版居中且不重複，分別使用 mask-position 和 mask-repeat 屬性。
img {
mask-size: 95%, 100%;
mask-position: center;
mask-repeat: no-repeat;
mask-image:
url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
repeating-radial-gradient(transparent 0 5px, black 5px 10px);
}
結果
使用 SVG <mask> 進行蒙版
此示例演示了使用 SVG <mask> 元素作為蒙版。在這種情況下，蒙版的顏色很重要，因為 SVG 蒙版的 mask-type 值預設為 luminance，這意味著白色不透明區域（100% 亮度）將被蒙版並可見，透明和黑色區域（0% 亮度）將被裁剪，介於兩者之間的任何區域將被部分蒙版。
HTML
我們為四個影像中的每一個都包含了一個 id，以及一個包含等量 <mask> 元素的 SVG。
<img
id="green"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<img
id="stroke"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<img
id="both"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<img
id="alphaMode"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<svg height="0" width="0">
<mask id="greenMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green" />
</mask>
<mask id="strokeMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="none"
stroke="white"
stroke-width="20" />
</mask>
<mask id="bothMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
</mask>
<mask id="black">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="black" />
</mask>
</svg>
CSS
我們為每個 <img> 應用一個不同的 <mask>。預設情況下，最後一個影像（帶有 black 填充）的任何部分都不可見。在這種情況下，雖然此示例中使用的所有顏色都是完全不透明的，但 mask-mode 預設為 match-type，在這種情況下解析為 luminance。
#green {
mask-image: url("#greenMask");
}
#stroke {
mask-image: url("#strokeMask");
}
#both {
mask-image: url("#bothMask");
}
#alphaMode {
mask-image: url("#black");
}
body:has(:checked) img {
mask-mode: alpha;
}
black、white 和 green 的亮度值分別為 0、100 和 46.228。這意味著蒙版為白色的區域將可見，而蒙版為黑色或完全透明的區域將被裁剪（不可見）。蒙版為綠色的區域將可見但更亮，相當於有一個 46.228% 不透明的白色蒙版。
結果
勾選複選框可在 mask-mode 的值之間切換：alpha（選中）和解析為 luminance 的初始值（未選中）。當使用 alpha 時，蒙版的顏色無關緊要；重要的是 alpha 透明度。當值解析為 luminance 時，white 區域可見，black 區域不可見，green 區域可見但透明度與顏色 green 的亮度匹配。當 mask-mode 設定為 alpha 時，顏色是等效的，因為它們都是完全不透明的。
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # the-mask-image |
瀏覽器相容性
載入中…