Question

这是CSS混合模式的一个示例，它针对指定的＆＃34;背景＆＃34;元素：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

以下是混合模式未应用于body的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

是什么给出的？计算CSS混合模式时是否考虑body元素？这适用于所有浏览器吗？我是谁，我为什么来这里？当尝试使用body对background-attachment: fixed进行动态（通过滚动）混合时，这就出现了问题。

更新：这似乎仅适用于Chrome; Firefox / Safari预计会有所表现 - 与Chrome有什么关系？

Answer 1

body元素在Chrome中混合，但前提是它的背景不会传播到画布。

要停止它，请为<html>元素添加背景。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: