如何让子 div 出现在父 div 中的 css 掩码上方

问题描述

我已将 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;
}

非常感谢任何帮助。

解决方法

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