我想得到一个background-clip: text在子 div 上从父 div 获取其背景。基本上它应该看起来像文本被剪掉了。
当背景位于同一元素上时很容易做到，但我似乎无法弄清楚背景何时位于不同的 div 上。
.background {
width: 100%;
height: 700px;
background: url('http://bgfons.com/uploads/gold/gold_texture464.jpg');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.background > div {
flex: 1;
font-size: 5em;
font-weight: bold;
text-align: center;
}
.foreground1 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
<div class="background">
<div class="foreground1">This is some text</div>
<div class="foreground2">This is some text</div>
</div>
我在 Plunkr 中有以下内容（文本应该从背景图像中获取其颜色）：
https://next.plnkr.co/edit/4lGVXnfvex9Q6mmY?open=lib%2Fscript.js https://next.plnkr.co/edit/4lGVXnfvex9Q6mmY?open=lib%2Fscript.js
这可能吗？如果可能的话，如何实现？任何帮助表示赞赏。
你必须申请background-clip到你想要剪辑的背景：
.background {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: url('http://bgfons.com/uploads/gold/gold_texture464.jpg');
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}
.background>div {
flex: 1;
font-size: 3em;
font-weight: bold;
text-align: center;
}
.foreground1 {
color: transparent;
}
<div class="background">
<div class="foreground1">This is some text</div>
<div class="foreground2">This is some text</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
