Background blend mode css: background-blend-mode — CSS | MDN
background-blend-mode | CSS | WebReference
Определяет режим наложения фонового изображения на фоновый цвет или другие фоновые изображения. Допустимо указывать несколько значений через запятую, при этом они будут применяться к фоновым изображениям, перечисленных в background-image, в том же порядке.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
background-blend-mode: normal | multiply | screen | overlay | darken | lighten
| color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue
| saturation | color | luminosityОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.
При описании визуальных эффектов режима наложения используются следующие термины, обозначающие цвета.
- Основной цвет — исходный цвет в изображении.
- Совмещённый цвет — цвет накладываемого изображения.
- Результирующий цвет — цвет, полученный в результате наложения.
- normal
- Обычный. Не используется смешивание цветов. Режим по умолчанию.
- multiply
- Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным.
- screen
- Осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением чёрного цвета, цвет остаётся неизменным. При перекрытии с применением белого цвета, цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора.
- overlay
- Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета.
- darken
- Замена тёмным. В качестве результирующего выбирается основной или совмещённый цвет, в зависимости от того, какой из них темнее. Пиксели с цветом, более светлым по сравнению с совмещённым, заменяются, а пиксели с цветом, более тёмным по сравнению с совмещённым, остаются неизменными.
- lighten
- Замена светлым. В качестве результирующего цвета выбирается основной или совмещённый цвет, в зависимости от того, какой из них светлее. Пиксели с более тёмным цветом по сравнению с совмещённым цветом заменяются, а пиксели с более светлым цветом по сравнению с совмещённым цветом остаются неизменными.
- color-dodge
- Осветление основы. Основной цвет заменяется более ярким для отражения совмещённого цвета в результате уменьшения контраста между двумя цветами. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
- color-burn
- Затемнение основы. Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений.
- hard-light
- Направленный свет. В этом режиме цвета умножаются или осветляются в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещённый цвет (источник света) является более тёмным, чем 50% серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления тёмных участков к изображению. Наложение чисто-чёрного или чисто-белого цвета приводит к получению чисто-чёрного или чисто-белого цвета.
- soft-light
- Рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения. Наложение чисто-чёрного или чисто-белого цвета создаёт отчётливые, более тёмные или более светлые зоны, но чистого чёрного или белого цвета не получится.
- difference
- Разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений.
- exclusion
- Исключение. В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
- hue
- Тон. В этом режиме создаётся результирующий цвет с яркостью и насыщенностью основного цвета и цветовым тоном совмещённого цвета.
- saturation
- Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета.
- color
- Цвет. Создаётся результирующий цвет с яркостью основного цвета и с цветовым тоном и насыщенностью совмещённого цвета. Этот режим сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям.
- luminosity
- Яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background-blend-mode</title> <style> body { background: /* Параметры фонового изображения */ url(/example/image/aquaria.jpg) center / cover no-repeat fixed, linear-gradient(#00A8DE, #FFF) fixed; /* Градиент */ background-blend-mode: luminosity; /* Режим наложения */ } </style> </head> <body> </body> </html>Рис. 1. Вид фона
Объектная модель
Объект.style.backgroundBlendMode
Примечание
Safari до версии 10 и iOS Safari до версии 10.3 не поддерживают значения hue, saturation, color и luminosity.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.02.2020
Редакторы: Влад Мержевич
Свойство background-blend-mode | CSS справочник
CSS свойстваОпределение и применение
CSS свойство background-blend-mode определяет режим смешивания слоя каждого фонового цвета ( и / или изображения).
Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:
Поддержка браузерами
У браузера Safari отсутствует поддержка следующих значений свойства: hue, saturation, color и luminosity.CSS синтаксис:
background-blend-mode: "normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"; /* допускается использование нескольких режимов смешивания в одном объявлении */ background-blend-mode: "multiply, screen
JavaScript синтаксис:
object.style.backgroundBlendMode = "normal"
Значения свойства
| Значение | Описание |
|---|---|
| normal | Устанавливает режим смешивания на нормальный. Данное значение установлено по умолчанию. |
| multiply | Устанавливает режим смешивания multiply (режим затемнения). |
| screen | Устанавливает режим смешивания screen (режим осветления). |
| overlay | Устанавливает режим смешивания overlay (режим контраста). |
| darken | Устанавливает режим смешивания darken (режим затемнения). |
| lighten | Устанавливает режим смешивания lighten (режим осветления). |
| color-dodge | Устанавливает режим смешивания color-dodge (режим осветления). |
| color-burn | Устанавливает режим смешивания color-burn (режим затемнения). |
| hard-light | Устанавливает режим смешивания hard-light (режим контраста). |
| soft-light | Устанавливает режим смешивания soft-light (режим контраста). |
| difference | Устанавливает режим смешивания difference (режим сравнения). |
| exclusion | Устанавливает режим смешивания exclusion (режим сравнения). |
| hue | Устанавливает режим смешивания hue (компонентный режим). |
| saturation | Устанавливает режим смешивания saturation (компонентный режим). |
| color | Устанавливает режим смешивания color (компонентный режим). |
| luminosity | Устанавливает режим смешивания liminosity (компонентный режим). |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Интерактивный пример
Значения свойства:
CSS код:
div {
background-blend-mode: ;
background-image: url('/css/primer/997.png');
background-color: green;
background-position: center;
background-repeat: no-repeat;
height: 150px;
}
Результат:
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства background-blend-mode</title>
<style>
.blendingMode {
height: 200px;
background-image: url('/css/primer/997.png');
background-repeat: no-repeat;
background-color: orange;
background-position: center;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div class = "blendingMode"></div>
</body>
</html>
С использованием свойства background-blend-mode и значения «multiply» мы получили следующий результат:
CSS свойстваCSS свойство background-blend-mode | Как создать сайт
CSS справочник
CSS свойство background-blend-mode задает режим смешивания слоя каждого фонового цвета ( и / или изображения).
Поддержка браузерами
CSS синтаксис:
background-blend-mode: "normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"; /* допускается использование нескольких режимов смешивания в одном объявлении */ background-blend-mode: "multiply, screen
JavaScript синтаксис:
object.style.backgroundBlendMode = "normal"
Значения свойства
| Значение | Описание |
|---|---|
| normal | Устанавливает режим смешивания на нормальный. Данное значение установлено по умолчанию. |
| multiply | Устанавливает режим смешивания multiply (режим затемнения). |
| screen | Устанавливает режим смешивания screen (режим осветления). |
| overlay | Устанавливает режим смешивания overlay (режим контраста). |
| darken | Устанавливает режим смешивания darken (режим затемнения). |
| lighten | Устанавливает режим смешивания lighten (режим осветления). |
| color-dodge | Устанавливает режим смешивания color-dodge (режим осветления). |
| color-burn | Устанавливает режим смешивания color-burn (режим затемнения). |
| hard-light | Устанавливает режим смешивания hard-light (режим контраста). |
| soft-light | Устанавливает режим смешивания soft-light (режим контраста). |
| difference | Устанавливает режим смешивания difference (режим сравнения). |
| exclusion | Устанавливает режим смешивания exclusion (режим сравнения). |
| hue | Устанавливает режим смешивания hue (компонентный режим). |
| saturation | Устанавливает режим смешивания saturation (компонентный режим). |
| color | Устанавливает режим смешивания color (компонентный режим). |
| luminosity | Устанавливает режим смешивания liminosity (компонентный режим). |
Версия CSS
CSS3
Наследуется
Нет.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства background-blend-mode</title>
<style>
.blendingMode {
height: 200px;
background-image: url('/css/primer/997.png');
background-repeat: no-repeat;
background-color: orange;
background-position: center;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div class = "blendingMode"></div>
</body>
</html>
С использованием свойства background-blend-mode и значения «multiply» мы получили следующий результат:
CSS справочник
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Поделиться
Твитнуть
Поделиться
background-blend-mode | CAT.IN.WEB
Новые свойства CSS дают возможность верстальщикам более полно управлять цветом. Например, background-blend-mode позволяет регулировать смешивание наложенных друг на друга фоновых слоев.
Поддержка этого свойства пока не абсолютна, но стремительно увеличивается:
Собственно, режимы наложения позаимствованы из фотошопа:- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
Демо и краткое описание режимов
Режимы смешивания цветов, разумеется, действуют только в том случае, если в наличии имеются хотя бы два фоновых изображения, наложенных друг на друга. Для примера возьмем две картинки:
нижний фон —верхний фон —
Разноцветные полосы нижнего фона позволят увидеть, как ведут себя разные цвета при смешении.
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.
Background-Blend-Mode – вопросы и ответы по программированию
Мой CSS не показывает фоновое изображение в Microsoft Edge и IE11. Кажется, что это связано с линейными градиентами в этих браузерах. Цвет фона отображается, но не изображение в Edge и IE11. Какие-…
1 год, 4 месяца назад TomМожно ли применить режим css blend к элементу в другом div? Например, у меня есть большое изображение героя фона в одном div. Над этим изображением (в другом div) у меня есть синий полупрозрачный я…
У меня заголовок с фоновым изображением, цветным и смешанным режимами: умножьте. В свитке меняю положение фона вертикально, чтобы создать эффект параллакса. В firefox он загружается отлично, но при…
5 лет, 3 месяца назад kylmarkЯ использую компонент карусели из бутстрапа, а также хочу использовать режим blend-mode в background-blend-mode: multiply; для заголовка. К сожалению, режим смешивания не работает. Код следующий: &…
6 лет, 4 месяца назад CrayВот пример режимов наложения CSS, работающих против указанного «фона»: body { position: relative; } .background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-…
В Photoshop, если вы импортируете JPG-изображение с белым фоном в документ с синим background , вы можете сделать белый background изображения исчезнут, установив изображение в режим «умножения». М…
5 лет, 5 месяцев назад drake035Я искал свойство mix-blend-mode . Все работает нормально, пока я не добавлю что-то вроде transform: perspective(100px) или любых других 3D-преобразований в любом месте страницы, а затем полностью с…
5 лет, 10 месяцев назад Petr VnenkПредположим, что у меня есть div с градиентом, применяемым как фоновое свойство. Теперь я хочу наложить черный PNG (меньшего размера) и установить PNG в режим наложения фонового смешения. К сожален…
6 лет, 9 месяцев назад Adrian MKЯ создаю диаграмму ven из CSS и html. В firefox по какой-то причине режим mix-blend отображается полностью черным? .ven-element { width: 63%; padding-top: 63%; border-radius: 50%; text-transform: u…
5 лет, 11 месяцев назад ShambalaGЯ заметил, что при использовании mix-blend-mode результат отличается от того, что используется в background-blend-mode даже если вы используете тот же режим смешивания. Например, сравните приведенн…
Я создавал веб-сайт, используя только HTML и CSS, и я хотел применить черный полупрозрачный оттенок на Jumbotron [я использую BootStrap]. .jumbotron { height: 40rem; text-align: center; z-index: 2;…
Я пытаюсь обрабатывать изображение так же, как в файле фотошопа, — обесцветяя изображение в оттенки серого, а затем применяя наложение цвета с режимом многократного смешивания. С этой целью я созда…
6 лет, 11 месяцев назад JeffЯ ищу способ изменить непрозрачность background-color-blend-mode например Photoshop. Моя цель — оживить непрозрачность blend-mode, чтобы он исчез. Есть идеи? #img-esadvalence { background-image: ur…
CSS | Свойство background-blend-mode — GeeksforGeeks
Свойство background-blend-mode определяет, как фоновое изображение элемента должно сливаться друг с другом и с цветом фона элемента.
Синтаксис:
background-blend-mode: normal | multiply | screen | darken | lighten | осветление цвета | насыщенность | разница | яркость | наложение;
Свойство:
Нормальное: Это значение по умолчанию. Устанавливает нормальный режим наложения.
background-blend-mode: normal;
html
< div id = "myDIV" > |
Умножение: Устанавливает режим наложения на умножение.Это приводит к более темному изображению, чем раньше.
background-blend-mode: multiply;
html
< div id = "myDIV" > |
Экран: Устанавливает режим наложения на экран.В этом режиме изображение и цвет инвертируются, умножаются, а затем инвертируются. опять таки.
background-blend-mode: screen;
html
< div id = "myDIV" > |
Darken: Устанавливает режим наложения на затемнение.В этом режиме, если фоновое изображение темнее, чем фоновый цвет, изображение заменяется, в противном случае оно остается таким, каким оно было.
фоновый режим наложения: затемнение;
html
< div id = "myDIV" > |
Светлее: Устанавливает режим наложения на светлее.В этом режиме, если фоновое изображение светлее, чем фоновый цвет, изображение заменяется, в противном случае оно остается таким, каким оно было.
background-blend-mode: lighten;
html
< div id = "myDIV" > |
Color-Dodge: Устанавливает режим наложения на Color-Dodge.В этом режиме цвет фона делится на инверсию фонового изображения. Это очень похоже на режим наложения экрана.
фоновый режим наложения: осветление цвета;
html
< div id = "myDIV" > |
Насыщенность: Устанавливает режим наложения на светлее.Этот режим сохраняет насыщенность фонового изображения, смешивая оттенок и яркость цвета фона.
background-blend-mode: насыщенность;
html
< div id = "myDIV" > |
Разница: Устанавливает режим наложения на разницу.Этот режим является результатом вычитания более темного цвета фонового изображения и цвета фона из самого светлого. Часто изображение будет иметь очень высокий контраст.
фоновый режим наложения: разница;
html
< div id = "myDIV" > |
Яркость: Устанавливает режим наложения на яркость.В этом режиме яркость верхнего цвета сохраняется при использовании насыщенности и оттенка фонового цвета.
background-blend-mode: luminosity;
html
< div id = "myDIV" > |
Overlay: Устанавливает режим наложения на наложение.В этом режиме фоновый цвет смешивается с фоновым изображением, чтобы отразить светлость или темноту фона.
background-blend-mode: Overlay;
html
< div id = "myDIV" > |
Поддерживаемые браузеры: Браузеры, поддерживаемые свойством background-blend-mode , перечислены ниже:
- Google Chrome 35.0
- Firefox 30.0
- Opera 22.0
- Apple Safari 7.1
background-blend-mode · Документы WebPlatform
Сводка
Это свойство описывает, как фоновые изображения элемента должны сливаться друг с другом и с цветом фона элемента. Значение представляет собой список режимов наложения, соответствующих каждому фоновому изображению. Каждый элемент в списке будет применяться к соответствующему элементу фонового изображения. Если свойство не имеет достаточного количества значений, разделенных запятыми, чтобы соответствовать количеству слоев, UA должен вычислить его используемое значение, повторяя список значений, пока их не будет достаточно.
Обзорная таблица
- Начальное значение
-
<нормально> # - Применимо к
- Все элементы HTML и SVG
- Унаследовано
- Нет
- Медиа
- визуал
- Расчетное значение
- как указано
- Анимационный
- Нет
Свойство объектной модели CSS
:
- процентов
- Нет
Синтаксис
-
background-blend-mode: цвет -
режим наложения фона: затемнение цвета -
background-blend-mode: цветной dodge -
background-blend-mode: затемнение -
background-blend-mode: разница -
background-blend-mode: исключение -
фоновый режим наложения: жесткий свет -
фон-режим наложения: оттенок -
background-blend-mode: lighten -
background-blend-mode: luminosity -
background-blend-mode: умножить -
background-blend-mode: normal -
background-blend-mode: наложение -
background-blend-mode: насыщенность -
background-blend-mode: экран -
режим наложения фона: мягкий свет
Значения
- нормальный
- Это атрибут по умолчанию, который не указывает на смешение.Формула смешивания просто выбирает исходный цвет.
- умножить
- Исходный цвет умножается на целевой цвет и заменяет целевой цвет. Результирующий цвет всегда по крайней мере такой же темный, как исходный или целевой цвет. Умножение любого цвета на черный дает черный цвет. При умножении любого цвета на белый сохраняется исходный цвет.
- экран
- Умножает дополнения значений цвета фона и исходного цвета, а затем дополняет результат.Цвет результата всегда по крайней мере такой же светлый, как любой из двух составляющих цветов. Экран любого цвета с белым дает белый цвет; экранирование черным цветом оставляет неизменным исходный цвет. Эффект аналогичен проецированию нескольких слайдов одновременно на один экран.
- накладка
- Перемножает или отображает цвета в зависимости от значения цвета фона. Исходные цвета накладываются на фон, сохраняя его светлые участки и тени. Цвет фона не заменяется, а смешивается с исходным цветом, чтобы отразить светлость или темноту фона.
- темнее
- Фон заменяется источником более темного цвета; в противном случае его оставляют без изменений.
- светлее
- Выбирает более светлые цвета фона и источника. Фон заменяется источником там, где источник более светлый; в противном случае его оставляют без изменений.
- цвет-додж
- Повышает яркость цвета фона для отражения исходного цвета. Покраска черным цветом не меняет.
- горит
- Затемняет цвет фона, чтобы отразить исходный цвет.Покраска белым цветом не вызывает изменений.
- жесткий свет
- Перемножает или отображает цвета в зависимости от значения исходного цвета. Эффект похож на яркий свет прожектора на заднем плане.
- мягкий свет
- Делает цвета более темными или более светлыми в зависимости от значения исходного цвета. Эффект похож на освещение фона рассеянным светом.
- разница
- Вычитает более темный из двух составляющих цветов из более светлого цвета.Картина белым инвертирует цвет фона; окраска черным цветом не меняет.
- исключение
- Создает эффект, аналогичный эффекту режима «Разница», но с меньшей контрастностью. Картина белым инвертирует цвет фона; окраска черным цветом не меняет.
- оттенок
- Создает цвет с оттенком исходного цвета, а также насыщенностью и яркостью цвета фона.
- насыщенность
- Создает цвет с насыщенностью исходного цвета, а также оттенком и яркостью цвета фона.Рисование в этом режиме области фона, которая является чисто серой (без насыщенности), не приводит к изменениям.
- цвет
- Создает цвет с оттенком и насыщенностью исходного цвета и яркостью цвета фона. Это сохраняет уровни серого фона и полезно для раскрашивания монохромных изображений или тонирования цветных изображений.
- светимость
- Создает цвет с яркостью исходного цвета, а также оттенком и насыщенностью цвета фона.Это дает эффект, обратный эффекту цветного режима.
Примеры
Группа рамок, показывающих различные эффекты наложения.
Посмотреть живой пример
кузов {
маржа: 2em;
}
div {
/ * В качестве фона элемента необходимо иметь два фона (изображение, градиент, цвет)
фон: свойства первого фона, свойства второго фона; * /
фон: url (imageA.png) центр без повтора, url (imageB.png) центр без повтора;
радиус границы: 10 пикселей;
box-shadow: 5px 2px 10px # 888;
дисплей: встроенный блок;
высота: 200 пикселей;
маржа: 1em;
непрозрачность: 0,5;
переход: непрозрачность .25s легкость выхода;
ширина: 200 пикселей;
}
этикетка {
дисплей: блок;
фон: #fff;
семейство шрифтов: Georgia, Garamond, serif;
выравнивание текста: центр;
тень текста: .5px .7px .7px #eee;
}
div: hover {непрозрачность: 1.0; }
// фоновый режим наложения: режим наложения;
.normal {фон-режим наложения: нормальный; }
.умножить {фон-режим наложения: умножить; }
.screen {фон-режим наложения: экран; }
.overlay {фон-режим наложения: наложение; }
.darken {фон-режим наложения: затемнение; }
.ligthen {режим наложения фона: ligthen; }
.цвет-осветление {фон-режим наложения: осветление цвета; }
.color-burn {фон-режим-наложения: цвет-ожог; }
. жесткий-свет {фон-режим наложения: жесткий свет; }
. soft-light {режим наложения фона: мягкий свет; }
.difference {фон-режим наложения: разница; }
.исключение {фон-режим наложения: исключение; }
.hue {фон-режим наложения: оттенок; }
.saturation {фон-режим наложения: насыщенность; }
.color {фон-режим наложения: цвет; }
.luminosity {background-blend-mode: яркость; }
Использование
Список «background-blend-mode» должен применяться в том же порядке, что и «background-image». Это означает, что первый элемент в списке будет применяться к верхнему слою. Если свойство не имеет достаточного количества значений, разделенных запятыми, чтобы соответствовать количеству слоев, UA должен вычислить его используемое значение, повторяя список значений, пока их не будет достаточно. Если используется сокращение «background», свойство «background-blend-mode» для этого элемента должно быть сброшено на его начальное значение.
Банкноты
Разделимые режимы наложения (нормальный, умножение, экран, наложение, затемнение, осветление, осветление, затемнение цвета, жесткий свет, мягкий свет, разница, исключение)
Режим наложения называется разделяемым, если каждый компонент результирующего цвета полностью определяется соответствующими компонентами составляющего фона и исходных цветов - то есть, если формула смешивания применяется отдельно к каждому набору соответствующих компонентов.
Неразделимые режимы наложения (оттенок, насыщенность, цвет, яркость)
Неразделимые режимы наложения рассматривают все компоненты цвета в комбинации, в отличие от отдельных, которые рассматривают каждый компонент по отдельности.
Связанные спецификации
- Уровень компоновки и смешивания 1
- Рекомендация кандидата
См. Также
Статьи по теме
Фон
Атрибуты CSS
Визуальные эффекты
Внешние ресурсы
режимов наложения фона (инструкции) | Улучшение дизайна с помощью CSS
Если вы когда-либо использовали Adobe Photoshop, 0:01
вы могли быть знакомы с смесью режимы, доступные в палитре слоев.0:03
Здесь у меня сплошная коробка томатного цвета. 0:08
Но если я изменю режимы наложения, Я могу совместить цвет верхнего слоя 0:12
с фото горы в нижний слой поразительной ширины. 0:17
Если вы никогда не использовали Photoshop, или это не выглядит знакомым, не беспокойтесь.0:21
Вывод состоит в том, что эти самые визуальные эффекты также встроены в CSS. 0:28
И результаты могут быть не менее захватывающими. 0:32
Я смотрю статью CSS Tricks о режимах наложения фона. 0:38
Как объясняется, фоновый режим наложения свойство определяет, как элемент 0:43
фоновое изображение должно сливаться с цветом фона.0:47
Это удобный ресурс, чтобы иметь открывать при изучении режимов наложения. 0:52
Я лично никогда не утруждал себя запоминанием разница между умножением и 0:57
затемнить например. 1:01
Я могу просто проверить это руководство чтобы прояснить разницу или 1:03
просто поэкспериментируйте с CSS и посмотри, что мне нравится больше всего.1:08
Начнем наше исследование вставив гору 1:11
фото на задний план нашей шапки. 1:16
Мы используем сокращение фона один раз еще раз, чтобы указать URL-адрес изображения. 1:34
Чтобы центрировать изображение по горизонтали, пока установка свойства background-size на 1:41
обложка.1:46
Мы используем без повтора предотвратить мозаичное изображение. 1:48
И мы сохраняем тот же апельсин цвет фона, который мы использовали раньше. 1:52
Когда мы просматриваем в браузере, 2:00
мы не видим оранжевый цвет, так как это покрыто горным фото.2:02
И поскольку это фоновое изображение немного занят, чтобы на нем был разборчивый текст, 2:07
это хорошая возможность изучить некоторые режимы наложения фона. 2:12
Режимы наложения фона не являются частью стенограммы фона, 2:19
поэтому нам нужно указать их отдельно.2:26
Мне нравится, как апельсин и здесь уже совмещены горы, но 2:37
давай попробуем несколько разных такие варианты, как жесткий свет. 2:41
Обратите внимание, что два условия разделены дефисом.2:48
Или исключение. 2:56
Жесткий свет был слишком легким для размещения светлого текста и 3:05
исключение выглядит довольно зловещим для туристический сайт. 3:09
Вы можете продолжать исследовать здесь, но я собираюсь чтобы вернуть режим наложения на умножение.3:14
Наш сайт на озере Тахо выглядит довольно солидно. 3:26
На последнем этапе мы будем использовать CSS. градиенты, чтобы добавить немного больше визуального всплеска, 3:30
и добавьте несколько штрихов, чтобы улучшить наш сайт как на маленьком, так и на большом экране.3:35
CSS Gradients with background-blend-mode
Свойство CSS background-blend-mode позволяет смешивать фоны элемента: цвета, изображения и градиенты вместе с режимами наложения, подобными Photoshop (умножение, экран, наложение и т. Д. ). Он очень новый и на данный момент поддерживается последними выпусками Chrome, Firefox и Opera. Свойство скоро появится в Safari, но не в Internet Explorer.
уже очень эффективны при создании шаблонов, как показано в галерее CSS-шаблонов Lea Verou. С новым свойством background-blend-mode возможности снова расширяются.
полностью не зависят от разрешения и изменяются быстрее, чем изображения. Принимая во внимание соображения производительности, анимация и переходы возможны через свойства background-size или background-position .
Обратной стороной background-blend-mode наряду со многими очень новыми свойствами CSS является добавленная работа по обеспечению красивой альтернативы для браузеров без поддержки этого свойства. К счастью, это не так уж сложно. С помощью крошечного фрагмента Javascript мы можем определить, нет ли поддержки:
if (! ("BackgroundBlendMode" в document.body.style)) {
// Нет поддержки background-blend-mode
var html = document.getElementsByTagName ("html") [0];
html.className = html.className + "режим наложения без фона";
} В файле CSS теперь можно указать разные стили для неподдерживаемых браузеров с помощью класса .no-background-blend-mode . Есть и другие способы определения поддержки, с помощью Modernizr или даже с помощью CSS @supports . Однако вы можете столкнуться с ситуацией, когда эта дополнительная работа даже не нужна, и если оставить неподдерживаемый браузер для рендеринга градиентов CSS без background-blend-mode выглядит нормально.
Приведенные выше градиенты, скорее всего, невозможно точно воспроизвести в CSS без background-blend-mode . Однако использование градиента CSS вместо изображения не только избавляет вас от HTTP-запроса, но и становится намного меньше по размеру. Размеры градиентов CSS вычисляются без префикса, что поддерживается всеми последними браузерами.
Css, пример фонового режима наложения | Newbedev
Свойство background-blend-mode CSS устанавливает, как фоновые изображения элемента должны смешиваться друг с другом и с цветом фона элемента.
Режимы наложения должны быть определены в том же порядке, что и свойство background-image . Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и / или усекаться до совпадения длин.
Синтаксис
фоновый режим наложения: нормальный; background-blend-mode: затемнение, яркость; фон-режим наложения: начальный; фоновый режим наложения: наследование; фоновый режим наложения: отключено;
Значения
-
- Применяемый режим наложения.Может быть несколько значений, разделенных запятыми.
Формальное определение
Формальный синтаксис
<режим-смешения> #, где
<режим-смешения> = нормальный | умножить | экран | наложение | затемнить | светлее | цвет-уклонение | цветной ожог | жесткий свет | мягкий свет | разница | исключение | оттенок | насыщенность | цвет | светимость
Примеры
Базовый пример
.item {
ширина: 300 пикселей;
высота: 300 пикселей;
фон: url ('image1.png '), url (' image2.png ');
фон-режим наложения: экран;
} Попробуйте разные режимы наложения
Технические характеристики
Совместимость с браузером
| Настольный | мобильный | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Хром | Край | Firefox | Internet Explorer | Опера | Сафари | WebView Android | Chrome Android | Firefox для Android | Опера Android | Safari на iOS | Интернет Samsung | |
фоновый режим наложения | 35 | 79 | 30 | № | 22 | 8 | ≤37 | 35 | 30 | 22 | 8 | 3.0 |
См. Также
режимов наложения в CSS - Red Onion
Режимы наложения в CSS
Фриды Ниваль
Возможность совмещать фоновые изображения и элементы HTML - не новая технология. Однако, поскольку глобальная поддержка браузеров в настоящее время немногим превышает 90% во всем мире, эти методы становятся все более доступными для большинства пользователей.
Что такое режимы наложения?
Режимы наложения в CSS используются для смешивания двух или более слоев с использованием математики для вычисления значения цвета для каждого пикселя.Вы можете использовать режимы наложения как для изображений, так и для градиентов и однотонных элементов. Те, кто знаком с графическими программами, такими как Photoshop, узнают некоторые из доступных режимов наложения.
TL; DR: Пропустите теорию и сразу переходите к примерам изображений!
фоновый режим наложения
Смешивает фон элемента. Элемент может одновременно иметь фоновые изображения, градиенты и цвета. Используя background-blend-mode , эти слои будут смешаны друг с другом.Способ смешивания слоев определяется одним или несколькими (разделенными запятыми) значениями background-blend-mode .
/ * CSS * /
.пример{
фон: url ('your-image.jpg'),
линейный градиент (вниз, красный, синий),
зеленый;
размер фона: обложка;
фон-повтор: без повторения;
background-blend-mode: яркость, экран;
ширина: 500 пикселей;
высота: 500 пикселей;
} Порядок смешивания слоев, кажется, начинается с первого заданного значения фона, который также является «верхним» слоем.В приведенном выше примере фоновое изображение будет смешано с линейным градиентом с использованием значения режима наложения яркости . Затем зеленый цвет будет смешан с результатом изображения и градиентом, используя значение режима наложения screen .
!
Если количество значений background-blend-mode не соответствует списку фоновых изображений, градиентов или цветов, установленных для элемента, значения background-blend-mode будут повторяться или удаляться, чтобы списки соответствовали .
Значения режима наложения
Цвет: сочетает оттенок и насыщенность перекрывающегося слоя с яркостью нижнего слоя. Его можно использовать для добавления цвета или оттенка к изображениям.
Цветное затемнение: делает область перекрытия темнее, если не используется белый цвет.
Осветление цвета: делает область перекрытия ярче, если не используется черный.
Темнее: использует самое темное значение смешиваемых цветов.
Разница: вычитает более темный из смешиваемых цветов из более светлого. Использование белого цвета инвертирует цвет перекрывающейся области. При использовании черного ничего не изменится.
Исключение: похоже на разницу, но с меньшей контрастностью. Использование белого цвета инвертирует цвет перекрывающейся области, а использование черного ничего не изменится.
Жесткий свет: умножает или отображает цвета в зависимости от цветов перекрывающегося слоя.Аналогично наложению, но со сменой слоев.
Оттенок: сочетает оттенок перекрывающегося слоя с насыщенностью и яркостью другого слоя.
Inherit: любое значение, унаследованное от родительского элемента.
Начальное: начальное значение по умолчанию.
Светлее: использует самые светлые значения смешиваемых цветов.
Яркость: инвертирование эффекта режима цвета
Умножение: значения цвета слоев умножаются друг на друга. Цвета, умноженные на черный, дают черный цвет. Умножение цвета на белый дает исходный цвет.
Нормальный: Никаких необычных эффектов не происходит. Это похоже на наложение элементов без применения режима наложения.
Наложение: использует либо умножение, либо экран, в зависимости от цветов двух слоев. Похож на
с жестким светом, но со сменой слоев.Насыщенность: смешивает насыщенность верхнего слоя с оттенком и яркостью нижнего слоя. При использовании в области, не имеющей насыщенности (серой), ничего не произойдет.
Экран: инвертирует цвета, умножает их и инвертирует полученное значение.При использовании экрана любого цвета с белым будет белый цвет. Использование с черным дает исходный цвет. Сравните с
, умножьте.Мягкий свет: затемняет или осветляет цвета в зависимости от цветов перекрывающегося слоя. Похож на
hard-light, но мягче.Не задано: глобальное значение , сброс свойства для возврата к
, наследование(если свойство будет унаследовано от своего родителя) илиначального.
Поскольку доступно так много различных режимов наложения, и тот факт, что их можно использовать одновременно на нескольких фоновых слоях, позволяет создавать множество визуальных эффектов. Иногда лучший способ найти подходящий эффект - просто попробовать разные комбинации.
FilterBlend - это бесплатный онлайн-инструмент, позволяющий экспериментировать с различными эффектами.
CSS Blender от Sara Soueidan - еще один демонстрационный онлайн-инструмент.
Существует также более общая карта режимов наложения и их визуального воздействия в Mozilla.
режим смешивания
Так же, как background-blend-mode смешивает фоновые изображения, градиенты и цвета, mix-blend-mode предназначен для смешивания различных элементов с их окружением. mix-blend-mode также можно использовать с псевдоэлементами, что делает его еще более практичным для создания визуальных эффектов.
Обычно это может использоваться, когда вам нужно изменить цвет элемента в зависимости от цвета его фона.
К счастью, mix-blend-mode принимает те же значения, что и background-blend-mode .
Изолировать элементы: предотвратить смешение элементов
Иногда может потребоваться предотвратить смешивание элемента. Это можно сделать, установив изоляцию : изолировать; на родительской оболочке вокруг элемента, который вы хотите предотвратить от смешивания.
Изоляция не требуется для background-blend-mix , поскольку все смешивание должно происходить внутри самого элемента.
!
Вы можете достичь того же результата, не смешивая элемент, если перекрывающий элемент помещен в родительский элемент с непрозрачностью , меньше 1.
Поддержка браузера
background-blend-mode поддерживается во всех современных браузерах, с глобальной поддержкой около 93%. background-blend-mode не поддерживается в Internet Explorer или более старых версиях Edge (версии 12-18). iOS Safari может не поддерживать несколько фоновых режимов наложения.
режим смешивания-наложения имеет глобальную поддержку около 91% (для элементов HTML или смешивания HTML и SVG, значительно меньше только для SVG) и поддерживается в большинстве современных браузеров.Эта функция не поддерживается в Internet Explorer или более старых версиях Edge (версии 12-18). Для некоторых менее популярных браузеров (например, Opera Mini) поддержка сообщается как «неизвестная».
Примеры режима наложения
Количество эффектов, которых можно достичь, используя все возможности режимов наложения, конечно, ошеломляюще велико. Однако некоторые из них встречаются чаще, чем другие.
Тонирование изображения
Тонирование изображения любым цветом. Это помогает сократить время, затрачиваемое на редактирование изображений.Сотрудники, не имеющие навыков редактирования изображений, могут обновлять изображения.
См. «Пример режима наложения CSS для пера: тонирование изображения» Фриды Нивалл (@fridanyvall) на CodePen.
Смешивание нескольких изображений
Искусное совмещение двух или более изображений.
См. «Пример режима наложения CSS Pen: смешивание изображений вместе», автор - Фрида Нивалл (@fridanyvall) на CodePen.
Текст выноски и перекрывающийся текст
Полезно для улучшения SEO, поскольку текст не обязательно должен быть включен в изображение.Повышает производительность, поскольку часть изображения меньше, поскольку она больше не будет содержать текстовую часть. Это помогает сократить время, затрачиваемое на редактирование изображений.
См. Пример режима наложения CSS Pen: Knockout Text от Фриды Нивалл (@fridanyvall) на CodePen.
См. «Пример режима наложения CSS Pen: перекрывающийся текст» Фриды Нивалл (@fridanyvall) на CodePen.
См. «Пример режима наложения CSS для пера: перекрытие текста и наложение изображений» Фриды Нивалл (@fridanyvall) на CodePen.
Посмотрите, как перо играет в смешанном режиме от Фриды Нивалл (@fridanyvall) на CodePen.
Режимы наложения
Создавайте композиционные эффекты, смешивая два или более слоев, и узнайте, как изолировать изображение с белым фоном в этом модуле по режимам наложения.
The CSS Podcast - 024: Blend Modes
Duotone - это популярная обработка цвета для фотографии, которая заставляет изображение выглядеть так, как будто оно состоит только из двух контрастных цветов: один для светлых участков, а другой для слабых.Но как это сделать с помощью CSS?
Используя режимы наложения - и другие методы, о которых вы узнали, например фильтры и псевдоэлементы, - вы можете применить этот эффект к любому изображению.
Что такое режим наложения? #
Режимы наложения обычно используются в инструментах дизайна, таких как Photoshop, для создания композиционного эффекта путем смешивания цветов из двух или более слоев. Изменяя смешение цветов, вы можете добиться действительно интересных визуальных эффектов. Вы также можете использовать режимы наложения в качестве служебных программ, например, изолировать изображение с белым фоном, чтобы оно выглядело прозрачным.
Вы можете использовать большинство режимов наложения, доступных в средстве дизайна с CSS, используя свойства mix-blend-mode или background-blend-mode . режим смешивания-наложения применяет смешивание ко всему элементу, а режим смешивания-фона применяет смешивание к фону элемента.
Вы используете background-blend-mode , когда у вас есть несколько фонов на элементе и вы хотите, чтобы все они смешивались друг с другом.
режим смешивания-наложения влияет на весь элемент, включая его псевдоэлементы.Один из вариантов использования - это начальный пример двухцветного изображения, в котором цветовые слои применяются к элементу через его псевдоэлементы.
Режимы наложения делятся на две категории: разделяемые и неотделимые. В режиме раздельного наложения каждый компонент цвета, например RGB, рассматривается отдельно. В режиме неразрывного наложения все цветовые компоненты рассматриваются одинаково.
Отдельные режимы наложения #
Нормальный #
Это режим наложения по умолчанию, который ничего не меняет в том, как элемент смешивается с другими.
Умножить #
Режим наложения умножить похож на наложение нескольких прозрачных пленок друг на друга. Белые пиксели станут прозрачными, а черные - черными. Все, что находится между ними, умножит его значения яркости (света). Это означает, что свет становится намного светлее, а темный - темнее, что чаще всего дает более темный результат.
.my-element {
mix-blend-mode: multiply;
} Screen #
Использование screen умножает световых значений на - обратный эффект для умножения , и чаще всего дает более яркий результат.
.my-element {
mix-blend-mode: screen;
} Overlay #
Этот режим наложения - overlay - объединяет , умножение и экрана . Базовые темные цвета становятся темнее, а базовые светлые - светлее. Цвета среднего диапазона, такие как 50% серый, не изменяются.
.my-element {
mix-blend-mode: overlay;
} Затемнение #
Режим наложения затемнение сравнивает яркость темных цветов исходного изображения и фонового изображения и выбирает самый темный из двух.Он делает это, сравнивая значения RGB вместо яркости (например, умножает и делает экран ) для каждого цветового канала. При затемнение и светлее в результате этого процесса сравнения часто создаются новые значения цвета.
.my-element {
mix-blend-mode: затемнение;
} Lighten #
Использование lighten делает полную противоположность затемнению .
.my-element {
mix-blend-mode: lighten;
} Осветление цвета #
Если вы используете осветление цвета , он осветляет цвет фона, чтобы отразить исходный цвет.Чисто черные цвета в этом режиме не видят никакого эффекта.
.my-element {
смешанный-режим смешивания: осветление цвета;
} Цветное затемнение #
Режим наложения Цветное затемнение очень похож на режим наложения умножить , но увеличивает контраст, что приводит к более насыщенным полутонам и уменьшению яркости.
.my-element {
смешанный-режим смешивания: затемнение цвета;
} Жесткий свет #
Использование жесткого света создает яркий контраст.Этот режим наложения отображает или умножает значения яркости. Если значение пикселя светлее, чем 50% серого, изображение становится более светлым, как если бы оно было экранировано. Если он темнее, он умножается.
.my-element {
mix-blend-mode: жесткий свет;
} Мягкий свет #
Режим наложения soft-light - это менее жесткая версия оверлея . Он работает примерно так же, но с меньшим контрастом.
.my-element {
mix-blend-mode: мягкий свет;
} Difference #
Хороший способ представить, как работает разница , - это немного похоже на то, как работает негатив.Разница Режим наложения принимает значение разности каждого пикселя, инвертируя светлые цвета. Если значения цвета идентичны, они становятся черными. Различия в значениях будут инвертированы.
.my-element {
mix-blend-mode: разница;
} Исключение #
Использование исключения очень похоже на разность , но вместо того, чтобы возвращать черный цвет для идентичных пикселей, он возвращает 50% серого, что приводит к более мягкому результату с меньшей контрастностью.
.my-element {
mix-blend-mode: исключение;
} Неразделимые режимы наложения #
Эти режимы наложения можно рассматривать как компоненты цвета HSL. Каждый берет определенное значение компонента из активного слоя и смешивает его со значениями других компонентов.
Hue #
Режим наложения hue берет оттенок исходного цвета и применяет его к насыщенности и яркости цвета фона.
.my-element {
mix-blend-mode: оттенок;
} Saturation #
Это работает как hue , но при использовании насыщенности в качестве режима наложения применяется насыщенность исходного цвета к оттенку и яркости цвета фона.
.my-element {
mix-blend-mode: насыщенность;
} Color #
Режим наложения color создает цвет на основе оттенка и насыщенности исходного цвета и яркости цвета фона.
.my-element {
mix-blend-mode: color;
} Luminosity #
Наконец, яркость является инверсией цвета . Он создает цвет с яркостью исходного цвета, а также оттенком и насыщенностью цвета фона.
.my-element {
mix-blend-mode: яркость;
} Свойство
изоляции # Если вы установите для свойства изоляция значение изолировать , он создаст новый контекст наложения, который предотвратит его смешивание с фоновым слоем. Как вы узнали из модуля z-index, когда вы создаете новый контекст наложения, этот слой становится базовым. Это означает, что режимы наложения родительского уровня больше не будут применяться, но элементы внутри элемента с изоляцией : изолировать могут по-прежнему смешивать .
