我想根据背景更改元素的颜色(而不是元素本身的背景颜色)。
在本例中,徽标根据背景更改颜色:https://www.richardekwonye.com/
我似乎找不到任何关于这是如何做到的。
谢谢!
1sbrub3j1#
正如评论者所说,它是通过mix-blend-mode css属性完成的。Official documentation。
mix-blend-mode
这里有一个概念验证:
div.circle { display: inline-block; width: 30px; height: 30px; border-radius: 15px; background: green; } h1.header { display: inline-block; color: darkgray; } h1.logo { position: absolute; top: 0; color: lightgray; mix-blend-mode: difference; }
<div class="container"> <div class="circle"></div> <h1 class="header">Welcome to StackOverflow!</h1> <h1 class="logo">Hello</h1> </div>
1条答案
按热度按时间1sbrub3j1#
正如评论者所说,它是通过
mix-blend-mode
css属性完成的。Official documentation。这里有一个概念验证: