我正在尝试让子元素div使用
当背景在同一元素上时很容易实现,但是当背景在不同的div上时,我似乎无法想出方法。
我在Plunkr中有以下内容(文本应从背景图片中获取其颜色):
https://next.plnkr.co/edit/4lGVXnfvex9Q6mmY?open=lib%2Fscript.js
这是否可能?如果是,如何实现?感谢任何帮助。
background-clip: text
属性,从父元素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>