CSS中的透明文本但不透明背景[重复]

【问题标题】：transparent text but opaque background in css [duplicate]CSS中的透明文本但不透明背景[重复]
【发布时间】：2018-06-22 16:16:20
【问题描述】：

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

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

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

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

基本上我想要这个效果：

【问题讨论】：

我希望我的文字是透明的而不是背景
stackoverflow.com/questions/13932946/…

标签： html css

【解决方案1】：

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

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

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

【讨论】：