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

cssselektor {
  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:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  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:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Príklad

Nastavme vlastnosti mix-blend-mode hodnotu prekrytia:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  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