background-blend-mode häsiýeti

background-blend-mode häsiýeti fon suratynyň fon reňkine ýa-da başga suratlara goşulma tertibini kesgitleýär. Bu häsiýetde şeýle-de birnäçe bahany ütük bilen üýtgezilip görkezip bolýar, olar şol tertipde ulanular. Häsiýet üçin bahalar grafik redaktorlaryň esasy goşulma tertipleri bilen meňzeşdir.

Sintaksis

selektor {
	background-blend-mode: tertipler;
}

Tabloda background-blend-mode häsiýeti üçin esasy bahalar görkezilýär:

Baha

Baha	Düşündiriş
`normal`	Adaty. Reňkleriň goşulmasy ulanylmaýar. Bölünmedik tertip.
`multiply`	Köpeltmek. Bu tertipde esasy reňkiň bahasy birleşdirilen reňkiň bahasy bilen köpeldilýär. Netije reňk daimy has garaňky reňk bolýar.
`screen`	Ýagtyltmak. Bu tertipde esasy we birleşdirilen reňkiň ters bahalary köpeldilýär. Netije reňk hökmünde daimy has ýagty reňk ulanylýar.
`overlay`	Gapmak. Bu tertipde reňkler esasy reňge baglylykda köpeldilýär ýa-da ýagtyldylýar. Şekiller ýa-da reňkler bar bolan pikselleriň üstüni gapýar, esasy reňkiň ýagty we garaňky ýerlerini üýtgetmez galdyrýar.

Mysal

Geliň suratyň background-blend-mode häsiýetiniň bölünmedik bahasy bilen näme meňzeşdigine seredeliň:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Mysal

Indi bolsa background-blend-mode häsiýetiniň bahasyny köpeltme tertipine üýtgedeliň:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Mysal

Geliň suratymyz üçin ýagtyltma tertibini belleýeliň:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Şeýle-de görüň

background häsiýeti,
fon üçin gysgaltma häsiýet
background-image häsiýeti,
onyň kömegi bilen bloka fon suratyny bermek bolýar
mix-blend-mode häsiýeti,
onyň kömegi bilen çeşmäniň reňklerini fon suratynyň üstüne goşup bolýar
backdrop-filter häsiýeti,
filtler goşmaga mümkinçilik berýär