Vlastnosť mix-blend-mode
Vlastnosť mix-blend-mode nastavuje
režim prelínania farby prvku s farbou
pozadia alebo obrázkom pozadia.
Hodnoty pre vlastnosť sú analogické hlavným režimom
grafických editorov.
Syntax
selektor {
mix-blend-mode: hodnoty;
}
V tabuľke sú uvedené hlavné hodnoty pre
vlastnosť mix-blend-mode:
Hodnoty
| Hodnota | Popis |
|---|---|
normal |
Normálny. Nepoužíva sa miešanie farieb. Predvolený režim. |
multiply |
Násobenie. V tomto režime sa hodnota základnej farby násobí s hodnotou prelínanej farby. Výsledná farba je vždy tmavšia. |
screen |
Svetlosť. V tomto režime sa násobia inverzné hodnoty základnej a prelínanej farby. Ako výsledná farba sa vždy použije svetlejšia farba. |
overlay |
Prekrytie. V tomto režime sa farby násobia alebo zosvetľujú v závislosti od základnej farby. Vzory alebo farby prekrývajú existujúce pixely, pričom svetlé a tmavé oblasti základnej farby zostávajú nezmenené. |
Príklad
Pozrime sa, ako bude vyzerať obrázok
s predvolenou 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;
}
:
Príklad
A teraz zmeňme režim prelínania na násobenie:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Príklad
Nastavme vlastnosti mix-blend-mode
hodnotu prekrytia:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Pozri tiež
-
vlastnosť
background,
ktorá je skrátenou vlastnosťou pre pozadie -
vlastnosť
background-image,
pomocou ktorej je možné bloku nastaviť obrázok pozadia -
vlastnosť
background-blend-mode,
pomocou ktorej je možné prelínať obrázok pozadia s farbou pozadia