A background-blend-mode tulajdonság

A background-blend-mode tulajdonság meghatározza a háttérkép és a háttérszín vagy más képek összekeverési módját. Ebben a tulajdonságban több érték is megadható vesszővel elválasztva, amelyek ugyanabban a sorrendben lesznek alkalmazva. A tulajdonság értékei hasonlóak a grafikus szerkesztőprogramok alapvető módjaihoz.

Szintaxis

cssszelektor {
  background-blend-mode: módok;
}

A táblázat a background-blend-mode tulajdonság alapvető értékeit mutatja be:

Értékek

Érték	Leírás
`normal`	Normál. Nem használ színkeverést. Alapértelmezett mód.
`multiply`	Szorzás. Ebben a módban az alapszín értékét megszorozzuk az átfedő szín értékével. Az eredményül kapott szín mindig sötétebb szín.
`screen`	Kijelző. Ebben a módban az alapszín és az átfedő szín inverz értékeit szorozzuk össze. Az eredményül kapott színként mindig világosabb színt alkalmaz.
`overlay`	Átfedés. Ebben a módban a színeket megszorozzuk vagy kivilágosítjuk az alapszíntől függően. A minták vagy színek átfedik a meglévő pixeleket, az alapszín világos és sötét területeit változatlanul hagyva.

Példa

Nézzük meg, hogyan fog kinézni a kép a background-blend-mode tulajdonság alapértelmezett értékével:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Példa

Most pedig változtassuk meg a background-blend-mode tulajdonság értékét szorzásra:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Példa

Állítsuk be képünknek a kijelző módot:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Lásd még

a background tulajdonság,
ami a háttérre vonatkozó rövidített tulajdonság
a background-image tulajdonság,
amellyel háttérképet adhatunk meg egy blokkhoz
a mix-blend-mode tulajdonság,
amellyel az eredeti színeket lehet a háttérképre helyezni
a backdrop-filter tulajdonság,
amely szűrők alkalmazását teszi lehetővé