СВОЙСТВО MIX-BLEND-MODE

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

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


✕

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity

Значение	Описание
multiply screen overlay darken lighten color-dodge saturation color luminosity	Устанавливает следующие режимы наложения: normal multiply screen overlay darken lighten color-dodge saturation color luminosity
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

<div class="block">
    <img src="/images/solar-system-200.jpg">
</div>

HTML

.block {
    background: blue;
    display: inline-block
}

img {
    mix-blend-mode: lighten
}

CSS