我不确定这种效果的正确术语是什么。我想说它是混合模式或剪切路径的东西。我想要做的是，当文本滚动到另一个元素上方（或下方）以使文本更改其颜色时。请参阅下面的示例图片..
因此，默认情况下，文本是浅灰色的，然后当它滚动到灰色条下方（或上方，不确定应该以哪种方式堆叠）时，文本会变成黑色。
我知道我以前见过这样做，但只是不记得所使用的属性叫什么。
我想你正在寻找的是mix-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode but Browser Support http://caniuse.com/#search=mix-blend-mode还是很糟糕Fiddle https://jsfiddle.net/Lg0wyt9u/10/.
body {
height: 1000px;
}
.text {
text-transform: uppercase;
position: absolute;
top: 80%;
font-size: 50px;
font-weight: bold;
text-align: center;
width: 100%;
color: gray;
z-index: 2;
left: 0;
mix-blend-mode: difference;
}
.box {
width: 60%;
position: fixed;
transform: translate(-50%, 0);
z-index: 1;
left: 50%;
top: 0;
height: 100px;
background: #AAAAAA;
}
<div class="box"></div>
<div class="text">Lorem ipsum</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
