Question

请耐心等待......有点难以解释。所以我试图做的是用一块文本删除它背后的div的背景。下面链接的图像是Illustrator完成的，现在我正在尝试在HTML＆amp; 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>

目标是让span文本创建网格项覆盖背景的透明蒙版。

我愿意接受任何建议！：）

Answer 1

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

mix-blend-mode：mix-blend-mode CSS属性描述了一个元素的内容应该与元素的内容混合直接父母和元素的背景。

.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>

Answer 2

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

文本是Div背景剪报面具

2 个答案: