Свойство CSS background-blend-mode

Пример

Режим смешивания:

div {
    width: 290px;
    height: 69px;
    background-size: 290px 69px;
    background-repeat:no-repeat;
    background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
    background-blend-mode: color-dodge;
}

Попробуйте сами »

Определение и использование

Свойство background-blend-mode определяет режим смешивания фоновых слоёв (изображений и цветов).

Значение по умолчанию:	нормальный
Наследуется:	нет
Анимируемый:	нет. Посмотретьанимируемость
версия:	CSS3
Синтаксис JavaScript:	object.style.backgroundBlendMode="screen"

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая поддерживает это свойство.

Свойство
background-blend-mode	35.0	Не поддерживается	30.0	7.1	22.0

Синтаксис CSS

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Значение свойства

Значение	Описание	Пример
нормальный	Значение по умолчанию. Устанавливает обычный режим смешивания.	Попробуйте сами »
multiply	Режим умножения.	Попробуйте сами »
экран	Режим экрана.	Попробуйте сами »
overlay	Режим перекрытия.	Попробуйте сами »
darken	Режим Darken.	Попробуйте сами »
lighten	Режим Lighten.	Попробуйте сами »
color-dodge	Режим Color Dodge.	Попробуйте сами »
saturation	Режим Saturation.	Попробуйте сами »
color	Режим Color.	Попробуйте сами »
luminosity	Режим Luminosity.	Попробуйте сами »

Связанные статьи

Учебник по CSS:Фоны CSS

Другие расширения

CSS свойство