CSS Masking - mask-type 属性

CSS 属性 mask-type 将 SVG <mask> 元素设置为亮度或 alpha 蒙版。它适用于<mask>元素本身。

CSS mask-mode属性可以覆盖此属性，因为它具有相同的效果。唯一的区别是，它被应用于使用蒙版的元素。Alpha 蒙版的渲染通常更快。

可能的值

CSS 属性 mask-type 指定为以下值之一：

luminance：表示关联的蒙版图像是亮度蒙版。
alpha：表示关联的蒙版图像是 Alpha 蒙版。蒙版图层图像的透明度（Alpha 通道）值用作蒙版值。Alpha 值或 Alpha 通道指定<color>的不透明度。

适用于

应用于所有 <mask> 元素。

语法


mask-type = luminance | alpha;

CSS mask-type - alpha 值

以下示例演示如何使用 CSS 属性 mask-type，其中使用带有黑色和透明区域的掩码元素。使用元素的 id （#mask），将掩码放置在 <div> 元素上。由于蒙版具有黑色和透明区域，因此蒙版类型设置为 alpha。


<html>
<head>
<style>
	 	 div {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background-color: purple;
	 	 	 mask-image: url(#mask);
	 	} 	 	

	 	mask {
	 	 	 mask-type: alpha;	
	 	}
</style>
</head>
<body>
	 	<div></div>
	 	<svg>
	 	 	 <mask id="mask">
	 	 	 	 	<path fill="black" d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" />
	 	 	 </mask> 	 	
	 	</svg></body>
</html>

CSS mask-type - 亮度值

以下示例演示如何使用 CSS 属性 mask-type，并将值作为亮度。


<html>
<head>
<style>
	 	body {
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 height: 100%;
	 	 	 margin: 0;
	 	 	 background-color: darkgrey;
	 	 	 overflow: hidden;
	 	}

	 	.container {
	 	 	 display: grid;
	 	 	 position: relative;
	 	 	 padding: 20px;
	 	 	 border: 2px solid black;
	 	}

	 	.box {
	 	 	 margin: 20px;
	 	 	 display: block;
	 	 	 width: 200px;
	 	 	 height: 150px;
	 	 	 background-image: url(images/border.png);
	 	 	 mask-type: luminance;
	 	}

	 	.overlay {
	 	 	 position: absolute;
	 	 	 width: 100%;
	 	 	 height: 100%;
	 	 	 background-color: rgb(0, 201, 0, 0.2);
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="box"></div>
	 	 	 <div class="overlay"></div>
	 	</div>
</body>
</html>

在上面的例子中：

.box 类表示具有将被屏蔽的背景图像的元素。
.overlay 类用于向蒙版区域添加浅绿色覆盖层，以提高可见性。

打印本页