Как работает свойство mix-blend-mode: difference?
Почему mix-blend-mode:difference меняет белый цвет текста на чёрный цвет, когда белый фон. А когда чёрный цвет текста на чёрном фоне, то не меняет текст на белый цвет.
Белый текст на белом фоне. Происходит инверсия белого цвета в чёрный.
.btn {
padding: 20px;
background-color: white;
cursor: pointer;
}
.text {
color: white;
mix-blend-mode: difference;
}
.btn:hover {
background-color: black;
}<button class="btn">
<span class="text">Click me</span>
</button>Чёрный текст на чёрном фоне. Никакой инверсии не происходит.
.btn {
padding: 20px;
background-color: black;
cursor: pointer;
}
.text {
color: black;
mix-blend-mode: difference;
}
.btn:hover {
background-color: white;
}<button class="btn">
<span class="text">Click me</span>
</button>