Хосияти 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,
ки имкон медиҳад, ки филтрҳо такя карда шаванд