Новые свойства CSS дают возможность верстальщикам более полно управлять цветом. Например, background-blend-mode позволяет регулировать смешивание наложенных друг на друга фоновых слоев.
Это свойство уже поддерживается во всех основных браузерах (30.08.2021):
Собственно, режимы наложения позаимствованы из фотошопа:
Демо и краткое описание режимов
Режимы смешивания цветов, разумеется, действуют только в том случае, если в наличии имеются хотя бы два фоновых изображения, наложенных друг на друга. Для примера возьмем две картинки:
Разноцветные полосы нижнего фона позволят увидеть, как ведут себя разные цвета при смешении.
background-blend-mode: normal
В нормальном режиме верхний фон полностью закрывает нижний.
background-blend-mode: multiply
Умножение цветов — перемножает значения каждого канала обоих цветов, белый цвет пропадает.
background-blend-mode: screen
Противоположность режима multiply — инвертирует значение каждого канала обоих цветов, перемножает их, а результат снова инвертирует. В результате черный цвет пропадает.
background-blend-mode: overlay
Совмещает два предыдущих режима — умножает темные пиксели, от чего они становятся еще темнее, и применяет режим screen к светлым, от чего они светлеют еще больше, таким образом, контраст усиливается.
background-blend-mode: soft-light
Принцип работы такой же, как у предыдущего режима, но результат немного отличается.
background-blend-mode: hard-light
Противоположность режиму soft-light, экранирует темные пиксели и умножает светлые.
background-blend-mode: darken
Выбирает наиболее темное значение цвета из двух.
background-blend-mode: lighten
В противоположность предыдущему режиму выбирает наиболее светлое значение цвета из двух.
background-blend-mode: color-dodge
Увеличивает яркость нижнего фона, в результате увеличивается контрастность слоев.
background-blend-mode: color-burn
Делает нижний фон темнее. Контрастность, опять же, увеличивается.
background-blend-mode: difference
Вычитает темный цвет из светлого, в результате получается некое подобие негатива. Черный цвет при этом не изменяется, а белый становится черным.
background-blend-mode: exclusion
Похож на предыдущий режим, однако, имеет меньший контраст.
background-blend-mode: hue
Изменяет оттенок нижележащего слоя на оттенок верхнего, при этом не изменяет яркость и насыщенность.
background-blend-mode:saturation
Изменяет оттенок и яркость нижележащего слоя, оставляя насыщенность неизменной.
background-blend-mode:color
Изменяет оттенок и насыщенность нижележащего слоя на аналогичные значения верхнего, при этом не изменяет яркость.
background-blend-mode: luminosity
Дает прямо противоположный эффект режиму color, а если изображения поменять местами, то эффект будет точно такой же.
Как же много режимов!
Режимов, действительно, много, и запутаться в них несложно. Чтобы разобраться, их можно распределить по группам:
- затемняют изображение режимы
multiply, darken, color-burn; - осветляют изображение режимы
screen, lighten, color-dodge; - увеличивают контрастность режимы
overlay, hard-light, soft-light; - разницу между слоями вычисляют режимы
difference, exclusion; - с отдельными компонентами цвета работают режимы
hue, saturate, color, luminosity.
0 комментариев