如何仅在元素的背景而不是其子元素上应用遮罩图像? [英] How to apply a mask-image only on an element's background and not on its children?

问题描述

我正在尝试在元素的背景上应用遮罩图像，但是我不想遮罩其子元素.我试图更改z索引没有成功.

I'm trying to apply a mask-image on the background of an element, but I don't want to mask its children. I've tried to change the z-index without any success.

* {
  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>

您可以在我的Codepen上看到: https://codepen.io/marc-tison/pen/jOWGaYe ，红色框被屏蔽.

As you can see on my Codepen: https://codepen.io/marc-tison/pen/jOWGaYe, the red box is masked.

有防止这种情况的解决方案吗?

Is there a solution to prevent this?

推荐答案

在伪元素中使用它:

* {
  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>

这篇关于如何仅在元素的背景而不是其子元素上应用遮罩图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！