mix-blend-mode
Ustala, jak kolory elementu mieszają się z tym, co leży pod nim.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.mixBlendMode = "multiply"
Przykład
#.cursor-title {
color: #fff;
mix-blend-mode: difference;
}<div style="position: relative; padding: 24px; border-radius: 12px; background: linear-gradient(90deg, #fff 50%, #000 50%);">
<h2 class="cursor-title" style="margin: 0; color: #fff; mix-blend-mode: difference; font-size: 32px;">Czytelny na obu tłach</h2>
</div>Definicja i zastosowanie
#Właściwość mix-blend-mode działa jak tryby mieszania warstw w programach graficznych. Zamiast po prostu zasłaniać tło, element łączy z nim swoje kolory według wybranego wzoru.
multiply przyciemnia (białe znika, czarne zostaje), screen rozjaśnia (czarne znika), overlay podbija kontrast, a difference odejmuje kolory, co daje efekt negatywu tam, gdzie element nachodzi na tło.
Tryb dotyczy mieszania z treścią pod elementem w obrębie tego samego kontekstu stosu. Właściwość isolation: isolate na rodzicu ogranicza mieszanie tylko do jego środka.
Składnia
#mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | difference | exclusion | …;Wartości
#- Element zasłania tło bez mieszania.
- Mnożenie kolorów: wynik jest zawsze ciemniejszy.
- Odwrotność multiply: wynik jest zawsze jaśniejszy.
- Podbija kontrast, łącząc multiply i screen.
- Różnica kolorów, efekt podobny do negatywu.
Wartości w praktyce
#normal
.demo { mix-blend-mode: normal; }multiply
.demo { mix-blend-mode: multiply; }screen
.demo { mix-blend-mode: screen; }overlay
.demo { mix-blend-mode: overlay; }difference
.demo { mix-blend-mode: difference; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Tryb
differencez białym tekstem sprawia, że napis jest czytelny zarówno na jasnym, jak i ciemnym tle. - Tryby mieszania łatwo zepsuć kontrast. Sprawdzaj czytelność tekstu po zmianie tła.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.