mask-mode
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
mask-mode
CSS属性指示由mask-image
指向的遮罩被视为亮度或阿尔法遮罩。
/* 关取值的键字 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* 多个类型的值 */
mask-mode: alpha, match-source;
/* 全局变量的值 */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
语法
下面列出 mask-mode
的一个或多个关键字值,以逗号分隔。
Values
alpha
-
此关键字指示应使用掩码层图像的透明度(阿尔法通道)值作为掩码值。
luminance
-
此关键字指示掩膜层图像的亮度值应用作掩码值。
match-source
-
如果
mask-image
属性是<mask-source>
类型,掩模层图像的亮度值会被作为掩模值。如果它是类型
<image>
,掩码层图像的 alpha 值应用作掩码值。
形式语法
示例
CSS
#masked {
width: 227px;
height: 200px;
background: blue linear-gradient(red, blue);
mask-image: url(mdn.svg);
mask-mode: alpha; /* Can be changed in the live sample */
}
结果
规范
Specification |
---|
CSS Masking Module Level 1 # the-mask-mode |
浏览器兼容性
BCD tables only load in the browser