CSS masakin-modu

定义和用法

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 masakin

هاوسا مرجع:CSS masakin-klip

هاوسا مرجع:CSS masakin-komposit

هاوسا مرجع:CSS masakin-imaji

هاوسا مرجع:CSS masakin-ori

هاوسا مرجع:CSS masakin-posi

هاوسا مرجع:CSS masakin-sabuni

هاوسا مرجع:CSS masakin-maza

هاوسا مرجع:CSS masakin-tura