mask
mask CSS 簡寫屬性透過遮罩或剪裁指定區域來隱藏（部分或完全）一個元素。它是所有 mask-* 屬性的簡寫。該屬性接受一個或多個逗號分隔的值，每個值對應一個 <mask-layer>。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
/* Keyword values */
mask: none;
/* Image values */
mask: url("mask.png"); /* Raster image used as mask */
mask: url("masks.svg#star"); /* SVG used as mask */
/* Combined values */
mask: url("masks.svg#star") luminance; /* Luminance mask */
mask: url("masks.svg#star") 40px 20px; /* Mask positioned 40px from the top and 20px from the left */
mask: url("masks.svg#star") 0 0/50px 50px; /* Mask with a width and height of 50px */
mask: url("masks.svg#star") repeat-x; /* Horizontally-repeated mask */
mask: url("masks.svg#star") stroke-box; /* Mask extends to the inside edge of the stroke box */
mask: url("masks.svg#star") exclude; /* Mask combined with background using non-overlapping parts */
/* Multiple masks */
mask:
url("masks.svg#star") left / 16px repeat-y,
/* 16px-wide mask on the left side */ url("masks.svg#circle") right / 16px
repeat-y; /* 16px-wide mask against right side */
/* Global values */
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;
值
<mask-layer>-
一個或多個逗號分隔的遮罩層，由以下部分組成
<mask-reference>-
設定遮罩影像的源。請參閱
mask-image。 <masking-mode>-
設定遮罩影像的遮罩模式。請參閱
mask-mode。 <position>-
設定遮罩影像的位置。請參閱
mask-position。 <bg-size>-
設定遮罩影像的尺寸。請參閱
mask-size。 <repeat-style>-
設定遮罩影像的重複方式。請參閱
mask-repeat。 <geometry-box>-
如果只給出一個
<geometry-box>值，它會同時設定mask-origin和mask-clip屬性值。如果存在兩個<geometry-box>值，第一個定義mask-origin，第二個定義mask-clip。 <geometry-box> | no-clip-
設定受遮罩影像影響的區域。請參閱
mask-clip。 <compositing-operator>-
設定當前遮罩層使用的合成操作。請參閱
mask-composite。
描述
mask 簡寫屬性隱藏了它所應用的元素的部分或全部。元素被隱藏、可見或部分顯示的部分取決於遮罩的不透明度（alpha 通道）或亮度（luminance）。在 alpha 遮罩中，遮罩的不透明區域會顯示元素，透明區域會隱藏元素。在亮度遮罩中，遮罩的亮色不透明區域會顯示元素，暗色或透明區域會隱藏元素。
雖然並非所有構成的遮罩屬性都需要宣告，但任何被省略的值都會預設使用其初始值，即
mask-image: none;
mask-mode: match-source;
mask-position: 0% 0%;
mask-size: auto;
mask-repeat: repeat;
mask-origin: border-box;
mask-clip: border-box;
mask-composite: add;
在每個 <mask-layer> 中，mask-size 部分必須跟在 mask-position 值之後，並用正斜槓（/）分隔兩者。
如果存在兩個 <geometry-box> 值，第一個是 mask-origin 的值，第二個是 mask-clip 的值。如果存在一個 <geometry-box> 值和 no-clip 關鍵字，則 <geometry-box> 是 mask-origin 屬性的值，因為 no-clip 僅對 mask-clip 屬性有效。在這種情況下，這兩個值的順序無關緊要。如果只存在一個 <geometry-box> 值（沒有指定 no-clip 關鍵字），這個值將同時用於 mask-origin 和 mask-clip 屬性。
由於 mask 簡寫會將所有 mask-border-* 屬性重置為其 initial 值，因此你應該在任何 mask 宣告之後宣告這些屬性或 mask-border 簡寫。在你的宣告塊中設定 mask 時，你也隱式地設定了以下內容
mask-border-source: none;
mask-border-mode: alpha;
mask-border-outset: 0;
mask-border-repeat: stretch;
mask-border-slice: 0;
mask-border-width: auto;
因此，規範建議使用 mask 簡寫而不是各個組成屬性來覆蓋層疊中先前設定的任何遮罩。這能確保 mask-border 也被重置。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素；在 SVG 中，它適用於除 <defs> 元素外的容器元素以及所有圖形元素 |
| 繼承性 | 否 |
| 百分比 | 作為簡寫中的每個屬性
|
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
| 建立層疊上下文 | 是 |
正式語法
mask =
<mask-layer>#
<mask-layer> =
<mask-reference> ||
<position> [ / <bg-size> ]? ||
<repeat-style> ||
<geometry-box> ||
[ <geometry-box> | no-clip ] ||
<compositing-operator> ||
<masking-mode>
<mask-reference> =
none |
<image> |
<mask-source>
<position> =
<position-one> |
<position-two> |
<position-four>
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
<repetition>{1,2}
<geometry-box> =
<shape-box> |
fill-box |
stroke-box |
view-box
<compositing-operator> =
add |
subtract |
intersect |
exclude
<masking-mode> =
alpha |
luminance |
match-source
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<mask-source> =
<url>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
<repetition> =
repeat |
space |
round |
no-repeat
<shape-box> =
<visual-box> |
margin-box |
half-border-box
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<visual-box> =
content-box |
padding-box |
border-box
<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>
示例
遮罩影像
在此示例中，使用 CSS 生成的重複錐形漸變作為遮罩源來遮罩影像。我們還將顯示該漸變作為背景影像以進行比較。
HTML
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<div></div>
CSS
我們在 <img> 和 <div> 上設定了相同的 border、padding 和尺寸。
img,
div {
border: 20px dashed rebeccapurple;
box-sizing: content-box;
padding: 20px;
height: 220px;
width: 220px;
}
然後我們對 <img> 應用一個遮罩。mask-image 是使用 repeating-conic-gradient() 函式生成的。我們將其定義為一個 100px 乘 100px 的漸變，從影像的 content-box 的左上角開始重複。我們包含了兩個 <geometry-box> 值；第一個設定 mask-origin，第二個定義 mask-clip 屬性值。漸變從透明變為純色的 lightgreen。我們使用 lightgreen 來證明重要的不是遮罩的顏色，而是其透明度。
img {
mask: repeating-radial-gradient(
circle,
transparent 0 5px,
lightgreen 15px 20px
)
content-box border-box 0% 0% / 100px 100px repeat;
}
最後，我們為 <div> 的 background 簡寫屬性使用了與我們用於 mask 相同的值。
div {
background: repeating-radial-gradient(
circle,
transparent 0 5px,
lightgreen 15px 20px
)
content-box border-box 0% 0% / 100px 100px repeat;
}
結果
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # 遮罩 |
瀏覽器相容性
載入中…