СSS Свойство mix-blend-mode
Пример
Контейнер с красным фоном и изображением, которое сливается с красным контейнером (затемнение):
.container {
background-color: red;
}
.container img {
mix-blend-mode: darken;
}
Попробуйте сами »
Определение и использование
Свойство mix-blend-mode указывает, как содержимое элемента должно смешиваться с его прямым родительским фоном.
| Значение по умолчанию: | normal |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| JavaScript синтаксис: | object.style.mixBlendMode = "darken" Попробовать |
Поддержка браузеров
Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | Не поддерживаемый | 32.0 | 8.0 | 35.0 |
CSS Синтаксис
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
Значения свойств
| Значение | Описание |
|---|---|
| normal | Это индекс. Задает режим наложения на нормальный |
| multiply | Устанавливает режим наложения для умножения |
| screen | Устанавливает режим наложения на экран |
| overlay | Задает режим наложения на перекрытие |
| darken | Устанавливает режим наложения для затемнения |
| lighten | Устанавливает режим наложения для осветления |
| color-dodge | Устанавливает режим наложения на цвет-спрятать |
| color-burn | Устанавливает режим наложения на цвет-запись |
| difference | Устанавливает режим наложения на разницу |
| exclusion | Устанавливает режим наложения на исключение |
| hue | Задает режим наложения на оттенок |
| saturation | Устанавливает режим наложения на насыщенность |
| color | Устанавливает режим наложения на цвет |
| luminosity | Устанавливает режим наложения на яркость |
Примеры
Пример
Демонстрация всех значений:
.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode:
color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion
{mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation
{mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}
Попробуйте сами »
Связанные страницы
CSS Справочник: CSS Свойство background-blend-mode
