Почему не работают режимы наложения CSS при применении к телу документа?

Question

Почему не работают режимы наложения CSS при применении к телу документа?

Вот пример режимов наложения CSS, работающих с заданным элементом "background":

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>

Что дает? Это body элемент не учитывается при расчете режимов наложения CSS? Это относится ко всем браузерам? Кто я и почему я здесь? Это возникло как проблема при попытке реализовать динамическое (с помощью прокрутки) смешивание над body с background-attachment: fixed,

ОБНОВЛЕНИЕ: Это, кажется, применяется только в Chrome; Firefox/Safari ведут себя ожидаемо - что случилось с Chrome?

5

html css mix-blend-mode background-blend-mode

Источник

user6571532 22 сен '17 в 07:13

1 ответ

Решение

Другие вопросы по тегам html css mix-blend-mode background-blend-mode

user42585 22 сен '17 в 07:33 2017-09-22 07:33 · Accepted Answer · 2017-09-22 07:33

Элемент 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>