将多个蒙版图像应用于单个 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

你需要玩弄尺寸和位置。 mask 的工作方式与 background-image 相同，所以简单地想象一下您自己在同一个元素上制作两个图像（一个在顶部，另一个在底部）

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>

mask-composite的解决方案：

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>

将多个蒙版图像应用于单个 div

Applying multiple mask-image to a single div

html

css

css-mask