如何让 child div 出现在 parent div 中的 css 掩码上方

Question

我已将 svg 蒙版应用于使用 Gutenberg 封面块创建的 mp4 视频。问题是 wp-block-cover__inner-container 文本也被 svg 掩盖了，但需要出现在它上面。

我尝试使用以下答案来解决我的问题，但我不是专业人士，无法这样做：How to apply a mask-image only on an element's background and not on its children?

CSS:

.waves-video {
mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-image: url(https://net0kitchen.com/wp-content/uploads/2021/07/netzerokitchen-–-doughnut-01-1.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
}

.doughnut-text {
text-align: center;
padding: 20px;
margin: auto;
background: red;
color: white;
}

非常感谢任何帮助。

Answer 1

只需将蒙版样式从 .waves-video 移动到 .wp-block-cover__video-background

如何让 child div 出现在 parent div 中的 css 掩码上方

How can I make a child div appear above a css mask in parent div

css

wordpress

z-index

css-mask