CSS Masking - mask-composite 属性

CSS mask-composite 属性定义了如何将 mask、图像与元素的背景合成。

可能的值

属性 mask-composite 可以具有以下一个或多个关键字值，用逗号分隔。

add - 将源置于目标上方。
subtract - 放置源，使其位于目标之外。
intersect - 将目标替换为与其重叠的源部分。
exclude − 源和目标的非重叠区域不重叠。

在这里，源是指当前掩码层，而其后面的所有层都称为目标。

适用于

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

语法


mask-composite: add | subtract | intersect | exclude;

CSS mask-composite - 增加价值

以下示例演示了应如何使用“添加”复合模式来组合蒙版。最终的蒙版包含两个蒙版图像覆盖的区域 -


<html>
<head>
<style>
	 	.box {
	 	 	 margin: 20px auto;
	 	 	 display: block;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-color: red;
	 	 	 -webkit-mask-image: url(images/book.png), url(images/heart.png);
	 	 	 mask-image: url(images/book.png), url(images/heart.png);
	 	 	 -webkit-mask-repeat: no-repeat, no-repeat;
	 	 	 mask-repeat: no-repeat, no-repeat;
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 mask-size: 100% 100%;
	 	 	 -webkit-mask-composite: add;
	 	 	 mask-composite: add;
	 	}
</style>
</head>
<body>
	 	<div class="box"></div>
</body>
</html>

CSS mask-composite - 减去值

下面的示例演示如何使用 mask-composite 属性减去值。应从背景中减去两个掩模图像的重叠区域 -


<html>
<head>
<style>
	 	.box {
	 	 	 margin: 20px auto;
	 	 	 display: block;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-color: red;
	 	 	 -webkit-mask-image: url(images/book.png), url(images/heart.png);
	 	 	 mask-image: url(images/book.png), url(images/heart.png);
	 	 	 -webkit-mask-repeat: no-repeat, no-repeat;
	 	 	 mask-repeat: no-repeat, no-repeat;
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 mask-size: 100% 100%;
	 	 	 -webkit-mask-composite: subtract;
	 	 	 mask-composite: subtract;
	 	}
</style>
</head>
<body>
	 	<div class="box"></div>
</body>
</html>

CSS mask-composite - 相交值

以下示例演示了 mask-composite： intersect 属性如何定义两个蒙版图像的重叠区域（交叉点） -


<html>
<head>
<style>
	 	.box {
	 	 	 margin: 20px auto;
	 	 	 display: block;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-color: red;
	 	 	 -webkit-mask-image: url(images/book.png), url(images/heart.png);
	 	 	 mask-image: url(images/book.png), url(images/heart.png);
	 	 	 -webkit-mask-repeat: no-repeat, no-repeat;
	 	 	 mask-repeat: no-repeat, no-repeat;
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 mask-size:100% 100%;
	 	 	 -webkit-mask-composite: intersect;
	 	 	 mask-composite: intersect;
	 	}
</style>
</head>
<body>
	 	<div class="box"></div>
</body>
</html>

CSS mask-composite - 排除值

以下示例演示了 mask-composite： exclude 属性定义了从两个蒙版图像中排除的形状 -


<html>
<head>
<style>
	 	.box {
	 	 	 margin: 20px auto;
	 	 	 display: block;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-color: red;
	 	 	 -webkit-mask-image: url(images/book.png), url(images/heart.png);
	 	 	 mask-image: url(images/book.png), url(images/heart.png);
	 	 	 -webkit-mask-repeat: no-repeat, no-repeat;
	 	 	 mask-repeat: no-repeat, no-repeat;
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 mask-size:100% 100%;
	 	 	 -webkit-mask-composite: exclude;
	 	 	 mask-composite: exclude;
	 	}
</style>
</head>
<body>
	 	<div class="box"></div>
</body>
</html>

打印本页