要剪贴蒙版背景的文字

-1

忍着我这个......有点难以解释。所以我试图做的是有一段文字直接在它后面删除一个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>

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

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

来源

2016-10-26 Ross

可是......你遇到麻烦，或者只是想我们能够为您解决？ –

是的，试图找到附加图像的解决方案。 – Ross

我想你想让我们“忍受”你。 [与你一起是完全不同的]（http://english.stackexchange.com/q/1269）... –

，你可以尝试用混合 - 混合模式工作，

混合，混合模式：混合的共混-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>

来源

2016-10-26 15:22:11 frnt

请注意，目前这种技术仍然是高度实验性的。但是，这正是OP正在寻找的东西，而且没有其他办法可以做这样的事情。 –

@AntoineCombes可能会有，但我不知道。目前这工作正常。 – frnt

没有。这正是针对这种用例（当然还有其他一些情况），将混合模式引入CSS –

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

来源

2016-10-26 15:07:32

但是这不会删除div的背景（.grid-item-overlay） – Ross

现在使用这个代码 –

要剪贴蒙版背景的文字

回答

相关问题