Html 将多个遮罩图像应用于单个div

我可以在我想要的div上的任何位置应用

掩码图像

，但是我可以在同一div上应用多个

掩码图像

单个

遮罩图像的示例

：

div{
宽度：200px；
高度：200px；
背景颜色：绿色；
边框：2件纯黑；
-webkit遮罩图像：径向渐变(
在中心顶端画一个圆圈，
透明30px，
黑31px
);
}

---

您需要调整大小和位置。遮罩的工作方式与背景图像相同，因此只需想象您自己在同一元素上制作两个图像（一个在顶部，另一个在底部）

div{
宽度：200px；
高度：200px；
背景颜色：绿色；
边框：2件纯黑；
-网络工具包掩码：
径向梯度（圆心顶部，透明30px，黑色31px）顶部，
径向梯度（中心底部圆形，透明30px，黑色31px）底部；
-webkit掩码大小：100%51%；/*每个掩码大小的一半*/
-webkit掩码重复：无重复；/*别忘了这一点*/
}

---

我喜欢你的第一种方法，但我不能让它与随机数量的遮罩/图像一起工作：例如检查。@alexandernst我使用的大小不是通用的，你需要根据每个情况调整大小。。。没有通用的解决方案，我可以针对每种情况给你一个解决方案，但如果你不懂诀窍，这对你没有帮助。@alexandernst对于随机渐变，你唯一的解决方案是“蒙版合成”，但你需要正确使用它。。检查更新，添加了一个在chrome和Firefox中工作的解决方案。我得到了掩码大小的窍门，但我认为它只适用于某些边缘情况。例如，我尝试在顶部中心有一个遮罩，在每个底部边缘有一个遮罩。除非我在掩码大小的规格中遗漏了什么，否则无法指定“大小”（形状）。@alexandernst您可以拥有任何想要的形状（）。没有限制，您只需设置正确的大小/位置