Dynami c CSS цвет в зависимости от фона

Question

Цвет значков меняется в зависимости от фона с черного на белый.

Я не могу понять из инструмента инспектора, как это делается. Догадываетесь, что сделано с mix-blend-mode?

Может кто-нибудь объяснить мне, как это сделать?

Это веб-сайт, где я нашел это: https://www.dennissnellenberg.nl/en.

Answer 1

Это было сделано с mix-blend-mode: difference, который в основном меняет цвета в зависимости от фона.

Html:

<div class="background-wrapper">
   <p class="mix-blend-item"> Hello </p>
</div>

CSS:

.mix-blend-item {
    mix-blend-mode: difference;
    color: white;
}

.background-wrapper {
    background: black; // change it to white to invert mix-blend-item color
}

Answer 2

Вы правы - это mix-blend-mode.

. Он предоставляет ряд опций для добавления функций смешивания - ранее сфера Photoshop или других графических c дизайнерских программ. Для этого требуется ряд опций, в том числе разность, то есть режим наложения инверсии, создающий черно-белое изменение.

Браузеры теперь начинают поддерживать это - см. https://caniuse.com/#search = mix-blend- для поддержки .

См. также background-blend-mode для эквивалента фоновых изображений.