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>