语法
/* 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 |
浏览器兼容性
加载中…