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

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

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

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

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

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

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

cssdiv {
  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 background häsiýeti,
ulanyp bloka fon suratyny belläp bolýan background-image häsiýeti,
ulanyp fon suratyny fon reňkine goşup bolýan background-blend-mode häsiýeti,