CSS 掩码图像，是否可以显示掩码的元素 "on top"（无绝对定位）？

Question

我有一个应用了 SVG mask-image 的容器 div。它工作得很好，div 具有 SVG 本身的“形状”。当我添加另一个元素作为子元素时，比如一个文本（或另一个 div），该元素本身被“剪切”（屏蔽）。我认为这是面具的正常行为。

显示子元素的任何方法，尽管蒙版应用于父元素div？可能不使用绝对定位。

https://codepen.io/gremo/pen/vYdRjgo

.mask-wave {
  mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

Answer 1

如何应用 background-color 和掩码到 .mask-wave::before，然后是绝对位置和 z-index 你的 div 后面的伪元素。然后你可以让你的蒙版形状在文本后面或其他任何东西后面有背景颜色。

似乎是这个 How to apply a mask-image only on an element's background and not on its children?

的副本

CSS 掩码图像，是否可以显示掩码的元素 "on top"（无绝对定位）？

CSS mask-image, is possible to show an element "on top" of the mask (without absolute positioning)?

html

css