<分区>
html - 透明文本但CSS中的背景不透明
.parent-div {
background-image: url(path\to\image);
background-size: cover;
}
.text-div {
/* make text transparent but not this background */
background-color: orange;
}<div class="parent-div">
<div class="text-div">Welcome!</div>
</div>我想让 text-div 的文本透明，这样我就可以看到 parent-div 的背景。 text-div 的剩余部分必须是不透明的。
基本上我想要这个效果:
最佳答案
我在这里找到了问题的答案: https://codepen.io/zFunx/pen/EbOQow
body {
padding: 0;
margin: 0;
height: 100%;
}
.overlay {
background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);
height: 100%;
position: relative;
background-size: cover;
}
.overlay h1 {
position: absolute;
background-color: #000;
color: #fff;
mix-blend-mode: multiply;
text-align: center;
font-size: 3em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="overlay">
<h1>Mix-Blending in CSS</h1>
</div>关于html - 透明文本但CSS中的背景不透明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48239171/