javascript - 如何使用 javascript 获得 mix-blend-mode 滚动效果？

Question

我正在寻找一种方法来根据背景更改某个元素的背景颜色。您可以使用 mix-blend-mode 在 css 中做什么，但我希望能够设置颜色。

最好我可以对 SVG 使用相同的技巧。

为了展示我在这里得到的是一个带有 mix-blend-mode 的 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 的固定元素在绿色时为白色。

Answer 1

这里有一个技巧，您可以考虑 background-attachment:fixed

将固定元素的颜色放在不同的 block 中

.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>

当然，此解决方案有 2 个主要缺点:如果有内容，它会破坏背景技巧的魔力，您必须在不同的地方更改不同的值。

为了克服这个问题，我们可以考虑伪元素和 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>

现在你只需要将渐变的颜色改成你想要的颜色就可以了。