忍着我这个......有点难以解释。所以我试图做的是有一段文字直接在它后面删除一个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>
的目的是为具有跨度文本创建网格项叠加背景的透明遮罩。
我愿意接受任何建议! :)
可是......你遇到麻烦,或者只是想我们能够为您解决? –
是的,试图找到附加图像的解决方案。 – Ross
我想你想让我们“忍受”你。 [与你一起是完全不同的](http://english.stackexchange.com/q/1269)... –