Свойство background-blend-mode

Свойство background-blend-mode фондық суретті фон түсіне немесе басқа суреттерге біріктіру режімін белгілейді. Бұл қасиетте бірнеше мәндерді үтір арқылы көрсетуге болады, олар дәл осы ретпен қолданылады. Қасиет үшін мәндер графикалық редакторлардың негізгі режімдеріне ұқсас.

Синтаксис

селектор {
	background-blend-mode: режимдер;
}

Кестеде background-blend-mode қасиеті үшін негізгі мәндер көрсетілген:

Мәндер

Мән	Сипаттама
`normal`	Қалыпты. Түстерді араластыру қолданылмайды. Әдепкі режім.
`multiply`	Көбейту. Бұл режімде негізгі түстің мәні біріктірілген түстің мәніне көбейтіледі. Нәтижелік түс әрқашан қараңғырақ түс болады.
`screen`	Ағарту. Бұл режімде негізгі және біріктірілген түстің кері мәндері көбейтіледі. Нәтижелік түс ретінде әрқашан ашықырақ түс қолданылады.
`overlay`	Қаптау. Бұл режімде түстер негізгі түске байланысты көбейтіледі немесе ағартылады. Өрнектер немесе түстер бар пикселдерді қаптайды, негізгі түстің жеңіл және қараңғы аудандарын өзгеріссіз қалдырады.

Мысал

background-blend-mode қасиетінің әдепкі мәні бар сурет қалай көрінетінін қарастырайық:

<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;
}

Мысал

Енді background-blend-mode қасиетінің мәнін көбейтуге өзгертейік:

<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;
}

Мысал

Суретіміз үшін ағарту режімін орнатайық:

<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;
}

Сондай-ақ қараңыз

background қасиеті,
фон үшін қысқартылған қасиет ретінде
background-image қасиеті,
оның көмегімен блокқа фондық сурет беруге болады
mix-blend-mode қасиеті,
оның көмегімен бастапқы түстерді фондық суретке біріктіруге болады
backdrop-filter қасиеті,
ол сүзгілерді қолдануға мүмкіндік береді