Właściwość mix-blend-mode
Właściwość mix-blend-mode ustawia
tryb mieszania koloru źródłowego z kolorem tła
lub obrazem tła.
Wartości właściwości są analogiczne do głównych trybów
programów graficznych.
Składnia
selektor {
mix-blend-mode: wartości;
}
W tabeli przedstawiono główne wartości dla
właściwości mix-blend-mode:
Wartości
| Wartość | Opis |
|---|---|
normal |
Normalny. Nie jest używane mieszanie kolorów. Tryb domyślny. |
multiply |
Mnożenie. W tym trybie wartość koloru podstawowego jest mnożona przez wartość koloru nałożonego. Kolor wynikowy zawsze jest kolorem ciemniejszym. |
screen |
Rozjaśnianie. W tym trybie mnożone są odwrotne wartości koloru podstawowego i nałożonego. Jako kolor wynikowy zawsze stosowany jest jaśniejszy kolor. |
overlay |
Nakładanie. W tym trybie kolory są mnożone lub rozjaśniane w zależności od koloru podstawowego. Wzory lub kolory nakładają się na istniejące piksele, pozostawiając niezmienione jasne i ciemne obszary koloru podstawowego. |
Przykład
Spójrzmy, jak będzie wyglądać obraz
z wartością domyślną właściwości
mix-blend-mode:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: normal;
width: 400px;
height: 300px;
}
:
Przykład
A teraz zmieńmy tryb mieszania na mnożenie:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Przykład
Ustawmy właściwości mix-blend-mode
wartość nakładania:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Zobacz też
-
właściwość
background,
która jest właściwością skrótową dla tła -
właściwość
background-image,
za pomocą której blokowi można ustawić obraz tła -
właściwość
background-blend-mode,
za pomocą której można nałożyć obraz tła na kolor tła