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

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

4

1 回答 1

6

body 元素确实融入了 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>

于 2017-09-22T07:33:41.253 回答