如何使用JavaScript实现混合模式滚动效果？

Question

我正在寻找一种方法，可以根据背景更改某个元素的背景颜色。在CSS中，您可以使用混合模式（mix-blend-mode）来实现，但我想要能够设置颜色。

最好我能够在SVG中使用相同的技巧。

为了说明我的意思，以下是一个带有混合模式的jsfiddle: https://jsfiddle.net/5p69j4st/7/

.block {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  background-color: #fff;
  mix-blend-mode: difference;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  background-color: green;
}

.is-white {
  display: block;
  height: 300px;
  width: 100%;
  background-color: #fff;
}

<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>

所以我希望当在绿色背景下时，具有类名 "block" 的固定元素是白色的。

- Michiel

Answer 1

这里有一个技巧，可以将固定元素的颜色放在不同的块中考虑，使用 background-attachment:fixed

.block {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  border:1px solid;
  box-sizing:border-box;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  background:
    linear-gradient(#fff,#fff) 10px 10px/25px 25px fixed no-repeat,
    green;
}

.is-white {
  display: block;
  height: 300px;
  width: 100%;
  background:
    linear-gradient(#000,#000) 10px 10px/25px 25px fixed no-repeat,
    #fff;
}
body {
 padding-bottom:200px;
}

<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>

当然，这种解决方案有两个主要缺点：一是如果出现内容会破坏背景技巧的“魔力”，二是你必须在不同的地方更改不同的值。

为了克服这些问题，我们可以考虑使用伪元素和CSS变量。

:root {
  --t:10px;
  --l:10px;
  --h:25px;
  --w:25px;
}

.block {
  position: fixed;
  z-index:999;
  top: var(--t);
  left: var(--l);
  height: var(--h);
  width: var(--w);
  border:1px solid;
  box-sizing:border-box;
  color:red;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  position:relative;
  z-index:0;
  background:green;
}
.is-green::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(#fff,#fff) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}

.is-white {
  display: block;
  position:relative;
  height: 300px;
  width: 100%;
  background: #fff;
  color:#000;
}
.is-white::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(#000,#000) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}
body {
 padding-bottom:200px;
}

<div class="block">
Hi
</div>
<div class="is-green">
  lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>
<div class="is-white">
 lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>
<div class="is-green">
 lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>

现在，您只需要将渐变色更改为您想要的颜色即可。

- Temani Afif