为什么 CSS 混合模式在应用于文档正文时不起作用？

Question

这是针对指定 "background" 元素的 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混合模式时是否不考虑body元素？这是否适用于所有浏览器？我是谁，我为什么在这里？当尝试在 body 与 background-attachment: fixed 上实现动态（通过滚动）混合时，这成为一个问题。

更新： 这似乎只适用于 Chrome； Firefox/Safari 表现正常 - Chrome 怎么了？

Answer 1

body 元素确实融入了 Chrome，但前提是它的背景没有传播到 canvas。

要阻止它这样做，请为 <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>

为什么 CSS 混合模式在应用于文档正文时不起作用？

Why don't CSS blend modes work when applied against the document body?

html

css

background-blend-mode

mix-blend-mode