javascript - 文本将成为 Div 背景的剪贴蒙版

Question

请耐心等待……有点难以解释。所以我想要做的是让一段文本删除直接在它后面的 div 的背景。下面链接的图片是用 Illustrator 完成的，现在我正试图在 HTML 和 CSS 中找到解决方案。

Illustrator screenshot of what I'm trying to accomplish

.grid-item {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 5px;
}

.grid-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.grid-container img {
  position: absolute;
}

.grid-item-overlay {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0,0,0,0.5);
}

span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-family: sans-serif;
  font-size: 40px;
  text-align: center;
  color: #fff;
}

<div class="grid-item">
  <div class="grid-container">
    <img src="https://unsplash.it/300/200/?random">
    <div class="grid-item-overlay">
      <span>Text Here</span>
    </div>
  </div>
</div>

目标是让跨度文本创建网格元素叠加层背景的透明 mask 。

我愿意接受任何建议! :)

Answer 1

您可以尝试使用 mix-blend-mode，

mix-blend-mode : The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

.grid-item {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 5px;
}

.grid-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.grid-container img {
  position: absolute;
}

.grid-item-overlay {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0,0,0,0.5);
}

span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-family: sans-serif;
  font-size: 40px;
  text-align: center;
  color:rgba(255,255,255,1);
  mix-blend-mode: overlay;
}

<div class="grid-item">
  <div class="grid-container">
    <img src="https://unsplash.it/300/200/?random">
    <div class="grid-item-overlay">
      <span>Text Here</span>
    </div>
  </div>
</div>