CSS mask-mode 属性

定义和用法

mask-mode 属性指定遮罩层图像应被视为亮度遮罩还是 alpha 遮罩。

实例

让遮罩层图像被视为亮度遮罩：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

亲自试一试

CSS 语法

mask-mode: match-source|luminance|alpha|initial|inherit;

属性值

值 描述
match-source

如果 mask-image 属性是图像（图像 URL 或渐变），则将 mask-mode 设置为 alpha。

如果 mask-image 属性是 SVG <mask>，则使用 <mask> 元素的 mask-type 属性。

这是默认值。
luminance 使用遮罩图像的亮度值作为遮罩值。
alpha 使用遮罩图像的 alpha 值作为遮罩值。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： match-source
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS Masking Module Level 1
JavaScript 语法： object.style.maskMode="alpha"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相关页面

教程：CSS 遮罩

参考：CSS mask 属性

参考：CSS mask-clip 属性

参考：CSS mask-composite 属性

参考：CSS mask-image 属性

参考：CSS mask-origin 属性

参考：CSS mask-position 属性

参考：CSS mask-repeat 属性

参考：CSS mask-size 属性

参考：CSS mask-type 属性