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
szelektor {
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:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Lásd még
-
a
backgroundtulajdonság,
ami a háttérre vonatkozó rövidített tulajdonság -
a
background-imagetulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz -
a
background-blend-modetulajdonság,
amellyel a háttérképet a háttérszínre lehet helyezni