0

我有一个项目，我需要同时使用剪​​辑路径和蒙版，以便在 div 上获得某种渐变着色。我使用剪辑路径和蒙版将颜色包含在 div 的边界内。

这在 Chrome 和 Firefox 中都可以正常工作。但在 Safari 中，其他元素仍然在被遮罩的元素后面，无法进行交互。正如您在下面的代码片段中看到的，我添加了 2 个示例。一个使用剪辑路径，另一个使用蒙版。在 Safari 中，无法与绿色 div 进行交互。

#clip-container {
  width: 4rem;
  height: 3rem;
  background-color: yellow;
  clip-path: inset(0);
}

#clip-container::after {
  content: '';
  position: absolute;
  width: 5rem;
  height: 6rem;
  background-color: red;
}

#covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
}

#covered-container:hover {
  background-color: purple;
}

#mask-container {
  margin-top: 3rem;
  width: 4rem;
  height: 3rem;
  border: 1px solid blue;
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
}

#mask-container::after {
  content: '';
  position: absolute;
  width: 5rem;
  height: 6rem;
  background-color: pink;
}

#second-covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
}

#second-covered-container:hover {
  background-color: purple;
}
<div id="clip-container"></div>
<div id="covered-container"></div>

<div id="mask-container"></div>
<div id="second-covered-container"></div>

4

1 回答 1

1

控制自己的堆叠上下文，不要保留默认的：

#clip-container {
  width: 4rem;
  height: 3rem;
  background-color: yellow;
  clip-path: inset(0);
  position:relative;
  z-index:0;
}

#clip-container::after {
  content: '';
  position: absolute;
  z-index:-1;
  width: 5rem;
  height: 6rem;
  background-color: red;
}

#covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
  position:relative;
}

#covered-container:hover {
  background-color: purple;
}

#mask-container {
  margin-top: 3rem;
  width: 4rem;
  height: 3rem;
  border: 1px solid blue;
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
}

#mask-container::after {
  content: '';
  position: absolute;
  z-index:-1;
  width: 5rem;
  height: 6rem;
  background-color: pink;
}

#second-covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
  position:relative;
}

#second-covered-container:hover {
  background-color: purple;
}
<div id="clip-container"></div>
<div id="covered-container"></div>

<div id="mask-container"></div>
<div id="second-covered-container"></div>

于 2021-03-29T21:02:17.847 回答