透明文字，但在CSS中不透明的背景

Question

＆＃13;

＆＃13;

.parent-div {
  background-image: url(path\to\image);
  background-size: cover;
}

.text-div {
  /* make text transparent but not this background */
  background-color: orange;
}

＆＃13;

<div class="parent-div">
  <div class="text-div">Welcome!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想让 text-div 的文字变得透明，以便我可以看到 parent-div 的背景。 text-div 的剩余部分必须是不透明的。

基本上我想要这个效果：

Answer 1

我在这里找到了一个问题的答案： https://codepen.io/zFunx/pen/EbOQow

＆＃13;

＆＃13;

body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.overlay {
  background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);
  height: 100%;
  position: relative;
  background-size: cover;
}
.overlay h1 {
  position: absolute;
  background-color: #000;
  color: #fff;
  mix-blend-mode: multiply;
  text-align: center;
  font-size: 3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="overlay">
  <h1>Mix-Blending in CSS</h1>
</div>

＆＃13;

＆＃13;

＆＃13;