我试图在一个元素的背景上应用一个掩码图像，但是我不想掩码它的子元素。 我试过改变Z索引，但没有成功。
null
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #000;
}
.el {
width: 100%;
height: 60px;
mask-repeat: no-repeat;
mask-position: center;
background-color: #fff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25 27.53 61.57 18 50 18s-17.25 9.54-23.26 19.63C20.2 48.63 13.43 60 0 60V0h100z'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat-x;
-webkit-mask-position: left bottom;
z-index: 10;
}
.el p {
position: relative;
z-index 99;
text-align: center;
padding-top: 20px;
width:400px;
margin: auto;
background: red;
color: white;
}<div class="el"><p>Duis enim elit, porttitor id feugiat at, blandit at erat. Proin varius libero sit amet tortor volutpat diam laoreet.</p></div>null
正如您在我的代码Pen上看到的:https://codepen.io/marc-tison/pen/jowgaye，红色框被屏蔽了。
有没有办法防止这种情况发生？
在伪元素中使用它:
null
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #000;
}
.el {
position: relative;
z-index: 0;
}
.el:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25 27.53 61.57 18 50 18s-17.25 9.54-23.26 19.63C20.2 48.63 13.43 60 0 60V0h100z'/%3E%3C/svg%3E");
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25 27.53 61.57 18 50 18s-17.25 9.54-23.26 19.63C20.2 48.63 13.43 60 0 60V0h100z'/%3E%3C/svg%3E");
}
.el p {
text-align: center;
padding-top: 20px;
width: 400px;
margin: auto;
background: red;
color: white;
}<div class="el">
<p>Duis enim elit, porttitor id feugiat at, blandit at erat. Proin varius libero sit amet tortor volutpat diam laoreet.</p>
</div>