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>

objective 是让跨度文本创建网格项目叠加背景的透明遮罩。

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

Answer 1

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

将此 css 添加到您的 css 文件

    .text{
      color: rgba(255, 255, 255, 0.1);
       }

 .grid-item-overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: block;
  z-index:0;
  background-color:rgba(255,0,0,0.5);
}

Answer 2

您可以尝试使用 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>

Div 背景的剪切蒙版文本

Text to be clipping mask of Div background

javascript

html

css

mask

clipping