Vlastnost mix-blend-mode
Vlastnost mix-blend-mode nastavuje
režim prolínání zdrojové barvy s barvou pozadí
nebo obrázkem na pozadí.
Hodnoty pro vlastnost jsou analogické hlavním režimům
grafických editorů.
Syntaxe
selektor {
mix-blend-mode: hodnoty;
}
V tabulce jsou uvedeny hlavní hodnoty pro
vlastnost mix-blend-mode:
Hodnoty
| Hodnota | Popis |
|---|---|
normal |
Normální. Není použito míchání barev. Výchozí režim. |
multiply |
Násobení. V tomto režimu se hodnota základní barvy násobí hodnotou kombinované barvy. Výsledná barva je vždy tmavší barva. |
screen |
Prosvětlení. V tomto režimu se násobí inverzní hodnoty základní a kombinované barvy. Jako výsledná barva se vždy použije světlejší barva. |
overlay |
Překrytí. V tomto režimu se barvy násobí nebo prosvětlují v závislosti na základní barvě. Vzory nebo barvy překrývají existující pixely, přičemž světlé a tmavé oblasti základní barvy zůstávají nezměněny. |
Příklad
Podívejme se, jak bude vypadat obrázek
s výchozí hodnotou vlastnosti
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;
}
:
Příklad
A nyní změňme režim prolínání na násobení:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Příklad
Nastavme vlastnosti mix-blend-mode
hodnotu překrytí:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Viz také
-
vlastnost
background,
která je zkratkovou vlastností pro pozadí -
vlastnost
background-image,
pomocí které lze prvku nastavit obrázek na pozadí -
vlastnost
background-blend-mode,
pomocí které lze prolínat obrázek na pozadí s barvou pozadí