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 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,