Lastnost mix-blend-mode
Lastnost mix-blend-mode določa
način mešanja izvorne barve na barvo ozadja
ali sliko ozadja.
Vrednosti za lastnost so analogne osnovnim načinom
grafičnih urejevalnikov.
Sintaksa
selektor {
mix-blend-mode: vrednosti;
}
V tabeli so predstavljene glavne vrednosti za
lastnost mix-blend-mode:
Vrednosti
| Vrednost | Opis |
|---|---|
normal |
Običajen. Mešanje barv se ne uporablja. Privzeti način. |
multiply |
Množenje. V tem načinu se vrednost osnovne barve pomnoži z vrednostjo združene barve. Končna barva je vedno temnejša barva. |
screen |
Svetljenje. V tem načinu se pomnožijo obratne vrednosti osnovne in združene barve. Kot končna barva se vedno uporabi svetlejša barva. |
overlay |
Prekrivanje. V tem načinu se barve množijo ali svetlijo odvisno od osnovne barve. Vzorci ali barve prekrivajo obstoječe piksele, pri čemer ostanejo svetli in temni deli osnovne barve nespremenjeni. |
Primer
Poglejmo, kako bo izgledala slika
z privzeto vrednostjo lastnosti
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;
}
:
Primer
Zdaj pa spremenimo način mešanja na množenje:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Primer
Nastavimo lastnosti mix-blend-mode
vrednost prekrivanja:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Glejte tudi
-
lastnost
background,
ki je okrajšava za ozadje -
lastnost
background-image,
s katero lahko bloku nastavimo sliko ozadja -
lastnost
background-blend-mode,
s katero lahko prekrijemo sliko ozadja na barvo ozadja