A mix-blend-mode tulajdonság

A mix-blend-mode tulajdonság beállítja a szín és a háttérszín vagy háttérkép összekeverésének módját. A tulajdonság értékei hasonlóak a grafikus szerkesztők alapvető üzemmódjaihoz.

Szintaxis

cssszelektor {
  mix-blend-mode: értékek;
}

A táblázat a mix-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 elsődleges szín értékét megszorozzák 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 elsődleges és az átfedő szín inverz értékeit szorozzák össze. Az eredményül kapott színként mindig világosabb színt alkalmaznak.
`overlay`	Átfedés. Ebben a módban a színeket megszorozzák vagy kivilágítják az elsődleges színtől függően. A minták vagy színek átfedik a meglévő pixeleket, az elsődleges szín világos és sötét részeit változatlanul hagyva.

Példa

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

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

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

Результат:

Példa

Most pedig változtassuk meg az összekeverési módot szorzásra:

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

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

Результат:

Példa

Állítsuk be a mix-blend-mode tulajdonságnak az átfedés értéket:

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

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

Результат:

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 lehet beállítani egy blokkhoz
a background-blend-mode tulajdonság,
amellyel a háttérképet a háttérszínre lehet helyezni