基于背景更改元素颜色,该选项处于启用状态

pcrecxhr  于 2022-10-09  发布在  jQuery
关注(0)|答案(1)|浏览(128)

我想根据背景更改元素的颜色(而不是元素本身的背景颜色)。

在本例中,徽标根据背景更改颜色:https://www.richardekwonye.com/

我似乎找不到任何关于这是如何做到的。

谢谢!

1sbrub3j

1sbrub3j1#

正如评论者所说,它是通过mix-blend-mode css属性完成的。Official documentation

这里有一个概念验证:

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>

相关问题