background-blend-mode

Базовая поддержка Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Свойство background-blend-mode CSS задаёт, как изображения фона элемента должны смешиваться друг с другом и с цветом фона элемента.

Попробуйте

Режимы смешивания должны быть определены в том же порядке, что и свойство background-image. Если длина списков режимов смешивания и изображений фона не равны, она будет повторяться и/или усекаться до тех пор, пока длины не совпадут.

Синтаксис

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

Значения

<blend-mode>: Применяемый режим смешивания. Может быть несколько значений, разделённых запятыми.

Формальное определение

Начальное значение	`normal`
Применимо к	Все элементы. В SVG, он применяется к контейнерным элементам, графическим элементам и элементам, ссылающимся на графику. Также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимационная

Формальный синтаксис

background-blend-mode = 
  <mix-blend-mode>#

Примеры

Базовый пример

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

Попробуйте разные режимы смешивания

Спецификации

Спецификация
Компоновка и смешивание уровня 2 # background-blend-mode

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`background-blend-mode`	35	79	30	22	8	35	30	22	8	3.0	37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode