将多个掩码图像应用于单个div

Question

我可以在div上的任何位置应用mask-image，但我可以在同一个div上应用多个mask-image吗？

带有单个mask-image:的示例

div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;

-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
);
}

<div></div>

如果我想在顶部和底部同时应用相同的掩码，代码会是什么样子？

div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;

-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
), radial-gradient(
circle at center bottom,
transparent 30px,
black 31px
);
}

<div></div>

编辑：我知道Chrome支持mask-composite，但这(在撰写本文时(仅适用于Chrome。

Answer 1

您需要调整大小和位置。掩模的工作方式与背景图像相同，所以只需想象你自己在同一个元素上制作两个图像(一个在顶部，另一个在底部(

div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask: 
radial-gradient( circle at center top,    transparent 30px, black 31px) top, 
radial-gradient( circle at center bottom, transparent 30px, black 31px) bottom;
-webkit-mask-size:100% 51%; /* each one half the size */
-webkit-mask-repeat:no-repeat; /* don't forget this */
}

<div></div>

一个面具的另一个想法：

div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask: radial-gradient(circle, transparent 30px, black 31px) 0 100px; /* 100px is half the height */
}

<div></div>

与边界：

div {
width: 200px;
height: 200px;
background: radial-gradient(circle, transparent 30px, black 0 33px,green 33px) 0 100px border-box;
border: 2px solid black;
-webkit-mask: radial-gradient(circle, transparent 30px, black 31px) 0 100px; /* 100px is half the height */
}

<div></div>

---

具有掩模复合物的解决方案：

div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask: 
radial-gradient( circle at center top,    transparent 30px, black 31px), 
radial-gradient( circle at center bottom, transparent 30px, black 31px),
linear-gradient(black,black); /* this layer is mandatory */
-webkit-mask-composite: destination-in;
mask-composite: exclude; /* for non-webkit browser */
}

<div></div>