mix-blend-mode häsiýeti
mix-blend-mode häsiýeti çeşme reňkini fon reňkine ýa-da fon suratyna goşma usulyny belleýär.
Häsiýet üçin bahalar esasan grafik redaktorlaryň goşma režimlerine meňzeýär.
Sintaksis
selektor {
mix-blend-mode: bahalar;
}
Tabloda mix-blend-mode häsiýeti üçin esasy bahalar görkezilen:
Bahalar
| Baha | Düşündiriş |
|---|---|
normal |
Adaty. Reňkleri goşmak ulanylmaýar. Bölüm boýunça saýlanan režim. |
multiply |
Köpeltmek. Bu režimde esasy reňkiň bahasy gabat gelýän reňk bilen köpeldilýär. Netije reňk hemişe garaňkyrak reňk bolýar. |
screen |
Ýagtyltmak. Bu režimde esasy we gabat gelýän reňkleriň ters bahalary köpeldilýär. Netije reňk hökmünde hemişe ýagtyrak reňk ulanylýar. |
overlay |
Gabat gelmek. Bu režimde reňkler esasy reňge baglylykda köpeldilýär ýa-da ýagtyldylýar. Nakyllar ýa-da reňkler bar bolan pikelleri gabap, esasy reňkiň ýagty we garaňky ýerlerini üýtgetmezden galýar. |
Mysal
mix-blend-mode häsiýetiniň bölüm boýunça bahasy bilen suratyň nähili görünjegine seredeliň:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: normal;
width: 400px;
height: 300px;
}
:
Mysal
Indi goşma režimini köpeltmäge üýtgedeliň:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Mysal
mix-blend-mode häsiýetine gabat gelme bahasyny belleýeliň:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Şeýlede serediň
-
fon üçin gysgaldylan häsiýet bolan
backgroundhäsiýeti,
-
ulanyp bloka fon suratyny belläp bolýan
background-imagehäsiýeti,
-
ulanyp fon suratyny fon reňkine goşup bolýan
background-blend-modehäsiýeti,