CSS Masking - mask-mode 属性_CSS 菜鸟教程

CSS mask-mode 属性指定是否应将 mask-image 给出的掩码引用视为亮度蒙版还是 alpha 蒙版。

可能的值

alpha − 蒙版层图像的透明度值（alpha 通道）用作蒙版值。
luminance − 蒙版层图像的亮度值用作蒙版值。
<match-source> −当mask-image属性设置为<mask-source>时，将使用mask层图像的亮度值作为mask值。当 mask-image 属性设置为 <image> 时，蒙版图层图像的 alpha 值将用作蒙版值。

适用于

所有元素。在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素。

语法

mask-mode: alpha |luminance | <match-source>

CSS 掩码模式 - alpha

以下示例演示了 -webkit-mask-mode： alpha 属性将掩码模式设置为使用掩码图像的 alpha 通道 -

<html>
<head>
<style>
	 	img {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 -webkit-mask-repeat: no-repeat;
	 	 	 -webkit-mask-size: 100%; 	
	 	 	 -webkit-mask-image: url(images/bookmark.png);
	 	 	 -webkit-mask-mode: alpha;
	 	}
</style>
</head>
<body>
	 	<img src="images/pink-flower.jpg" alt="pink flower"></body>
</html>

CSS 蒙版模式 - 亮度

以下示例演示了 -webkit-mask-mode： luminance 属性将 mask-mode 设置为使用掩码图像的亮度值 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 227px;
	 	 	 height: 200px;
	 	 	 background-image: url(images/pink-flower.jpg);
	 	 	 background-size: cover;
	 	 	 -webkit-mask-image: linear-gradient(red, blue, yellow, transparent);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-mode: luminance;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container"></div>
</body>
</html>

<< CSS Masking - mask-image 属性 CSS Masking - mask-origin 属性 >>