要剪貼蒙版背景的文字

-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

現在使用這個代碼 –

要剪貼蒙版背景的文字

回答

相關問題