Каков порядок применения нескольких режимов наложения?

Question

У меня есть следующий код CSS:

div {
  background: url('image-url'), linear-gradient(gradient), url('image-url-2');
  background-blend-mode: blend-mode-1, blend-mode-2;
}

Положение градиентов или фонов URL может измениться. Я думаю, что это должно повлиять на порядок смешивания. Мой вопрос: как эти режимы применяются для расчета окончательного значения?

Применяются ли в первую очередь браузеры blend-mode-1 на url('image-url') а также linear-gradient(gradient) и позже применить blend-mode-2 по результатам первого и url('image-url-2') Или это наоборот?

Использую ли я правильное количество background-blend-mode или мне нужно указать 3 из них?

Answer 1

Порядок размещения фоновых изображений является ключевым фактором здесь.

Ваши фоновые изображения располагаются в обратном порядке, причем первое в списке является самым верхним в стеке рендеринга.

Режимы наложения применяются как любое разделенное запятыми свойство, применяемое к фонам, первое к первому изображению, второе ко второму и т. Д.

в вашем примере

div {
  background: url('image-url'), linear-gradient(gradient), url('image-url-2');
  background-blend-mode: blend-mode-1, blend-mode-2;
}

url2 находится внизу.

Над ним у вас есть градиент с примененным blend-mode-2.

И над ним, URL-адрес изображения с blend-mode-1.

Вы можете установить третий режим background-blend-mode. В этом случае он будет применяться к смеси между image-url-2 и background-color (что вы не установили в своем примере, но это можно было бы установить)

Answer 2

Смешивание происходит сзади наперед.

Другими словами, каждый элемент (изображение или градиент) смешивается с результатом смешивания всех нижележащих элементов.

Это важно, поскольку многие режимы наложения не являются ассоциативными . Пример - разница. Предположим, у вас есть 3 элемента:

• А = сплошной цвет #fff(передний элемент; ближайший к пользователю)
• В = сплошной цвет
• С = сплошной цвет #666(задний элемент; самый дальний от пользователя)

Произойдет следующее:

• Смешение В с С; результат черный( #666 - #666 = #000).
• Смешивание A с результатом предыдущего шага (черный цвет); результат белый( #fff - #000 = #fff).

Если бы смешивание началось с переднего элемента, то результатом был бы «темный уголь»:
(#fff - #666) - #666 = #333.

Живая демонстрация:

Вот что об этом говорят спецификации. Из :

Концептуально цвета исходного элемента смешиваются с фоном.

а также:

Фон — это содержимое позади элемента и то, из чего состоит этот элемент. Это означает, что фон является результатом компоновки всех предыдущих элементов.

Все еще немного расплывчато; состав и смешивание связаны, но не одно и то же. Но логичная интерпретация такова: смешивание должно работать сзади наперед. Я думаю, что все основные поставщики браузеров последовали этой интерпретации.

Имеет смысл указать третий режим наложения.

Как уже указывалось в vals, можно указать третий режим наложения, чтобы смешать третий элемент с файлом . Этот шаг смешивания всегда будет первым, поскольку цвет фона всегда находится за любым из элементов, указанных в background-image. Можно сказать, действует как четвертый элемент.

Однако отсутствие третьего режима смешивания не означает «не смешивать»! Из уровня композиции и смешивания 2уровня композитинга и смешивания 2 :

Если у свойства недостаточно значений, разделенных запятыми, чтобы соответствовать количеству слоев, ПА должен вычислить используемое значение, повторяя список значений, пока их не будет достаточно.

Другими словами, background-blend-mode: <bm1>, <bm2>автоматически расширяется в: background-blend-mode: <bm1>, <bm2>, <bm1>

Я не буду отрицать, что этот третий режим наложения не имеет никакого эффекта, но это по совершенно другой причине: отсутствие background-color. Из того же документа:

Все в CSS, что создает контекст стека, должно рассматриваться как «изолированная» группа.

а также:

В изолированной группе исходный фон должен быть черным и полностью прозрачным.

а также:

Cs = (1 - αb) x Cs + αb x B(Cb, Cs)

Полностью прозрачный фон (αb = 0) приводит к отбрасыванию результата смешивания и сохранению цвета исходного элемента (здесь: третьего элемента). Вот что происходит, когда не указан цвет фона.

Всегда есть вероятность, что кто-нибудь позже добавит фоновый цвет. Чтобы избежать неожиданных изменений цвета, я бы рекомендовал всегда указывать явный режим наложения для элемента сзади. Если вы не хотите смешиваться с фоновым цветом (если он есть), то просто скажите об этом, добавив normalв конец списка режимов наложения. Это может предотвратить неприятные сюрпризы в будущем, особенно когда <bm1>(режим наложения спереди, который автоматически занимает пустое место сзади) — это своего рода экзотическая смесь.