Question

我正在寻找一种基于背景来更改特定元素的背景色的方法。您可以在具有混合混合模式的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>

所以我希望带绿色的类块固定元素为白色。

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>

当然，此解决方案有两个主要缺点：如果有内容，将破坏背景技巧的魔术，您必须在不同位置更改不同的值。 / p>

为克服这一点，我们可以考虑使用伪元素和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>

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

如何使用JavaScript获得混合混合模式滚动效果？

1 个答案: