为什么将CSS混合模式应用于文档主体时无效？

Question

为什么将CSS混合模式应用于文档主体时无效？

htmlcssmix-blend-modebackground-blend-mode

5

以下是CSS混合模式针对指定的“背景”元素工作的示例：

body {
  position: relative;
}

.background {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(red, blue);
}

.blend {
  background: green;
  mix-blend-mode: difference;
}

<body>
  <div class="background"></div>
  <div class="blend">BLEND ME</div>
</body>

这是一个混合模式未应用于 body 的例子：

body {
  background-image: linear-gradient(red, blue);
  background-size: 100%;
  background-repeat: no-repeat;
}

.blend {
  background: green;
  mix-blend-mode: difference;
}

<body>
  <div class="blend">BLEND ME</div>
</body>

什么情况？计算CSS混合模式时是否不考虑元素？这适用于所有浏览器吗？我是谁，为什么在这里？当尝试在具有“background-attachment: fixed”的上实现动态（通过滚动）混合时，就会出现这个问题。

更新：这似乎只适用于Chrome；Firefox / Safari的行为符合预期 - Chrome怎么了？

- benjaminben

4

Chrome存在已知问题，似乎是这样。https://dev59.com/CJzha4cB1Zd3GeqPHZiD https://dev59.com/KqHia4cB1Zd3GeqPNQs5 在Firefox中看起来没问题。 - BoltClock

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alohci · Accepted Answer

元素在Chrome中确实会混合，但前提是其背景不会传播到画布上。

要停止这种情况，请为<html>元素添加背景。

html {
  background-color: white;
}
body {
  background-image: linear-gradient(red, blue);
  background-size: 100%;
  background-repeat: no-repeat;
}
.blend {
  background: green;
  mix-blend-mode: difference;
}

<body>
  <div class="blend">BLEND ME</div>
</body>