如何让子 div 出现在父 div 中的 CSS 掩码上方答案

【问题标题】：How can I make a child div appear above a css mask in parent div如何让子 div 出现在父 div 中的 CSS 掩码上方
【发布时间】：2021-07-13 22:48:42
【问题描述】：

我已将 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?

网址：https://net0kitchen.com/393-2

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;
}

非常感谢任何帮助。

【问题讨论】：

标签： css wordpress z-index css-mask

【解决方案1】：

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

【讨论】：

谢谢，谢谢，谢谢 :) @vladislav