码农教程 - 一技在手,衣食无忧! tools

目录

CSS mask-mode 属性

❮上一节 完整的CSS参考 下一节❯

示例

让掩模层图片被视为亮度掩模：

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

定义和用法

这个mask-mode属性指定遮罩层图片是否应被视为亮度遮罩或 alpha 遮罩。

默认值： 匹配源
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.maskMode="alpha"

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
mask-mode Not supported Not supported 53.0 Not supported Not supported

CSS 语法

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

属性值

Value Description
match-source If the mask-image property is an image (an image URL or a gradient), set mask-mode to alpha. If the mask-image property is an SVG <mask> element, use the <mask> element's mask-type property. This is default.
luminance Use the luminance values of the mask image as the mask values
alpha Use the alpha values of the mask image as the mask values
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

相关页面

CSS 参考：掩模图片属性

CSS 参考：掩码起源属性

CSS 参考：掩模位置属性

CSS 参考：掩码重复属性

CSS 参考：掩模尺寸属性

CSS教程：CSS 屏蔽


❮上一节 完整的CSS参考 下一节❯