Xüsusiyyət background-blend-mode

Xüsusiyyət background-blend-mode arxa plan şəklinin arxa plan rəngi və ya digər şəkillər üzərində qarışdırılma rejimini təyin edir. Bu xüsusiyyətdə eyni qaydada tətbiq olunacaq bir neçə dəyəri vergüllə ayıraraq da təyin etmək olar. Xüsusiyyət üçün dəyərlər qrafik redaktorların əsas rejimlərinə bənzəyir.

Sintaksis

selektor {
	background-blend-mode: rejimler;
}

Cədvəldə background-blend-mode xüsusiyyəti üçün əsas dəyərlər təqdim olunub:

Dəyərlər

Dəyər	Təsvir
`normal`	Normal. Rəng qarışdırması istifadə olunmur. Standart rejim.
`multiply`	Vurma. Bu rejimdə əsas rəngin dəyəri qarışdırılan rəngin dəyərinə vurulur. Nəticədə çıxan rəng həmişə daha tünd bir rəng olur.
`screen`	Açıqlaşdırma. Bu rejimdə əsas və qarışdırılan rəngin tərs dəyərləri bir-birinə vurulur. Nəticədə çıxan rəç kimi həmişə daha açıq bir rəng tətbiq olunur.
`overlay`	Örtmə. Bu rejimdə rənglər əsas rəngdən asılı olaraq vurulur və ya açıqlaşdırılır. Naxışlar və ya rənglər mövcud piksellərin üzərini örtərək, əsas rəngin açıq və tünd sahələrini dəyişməz qoyur.

Nümunə

Gəlin background-blend-mode xüsusiyyətinin standart dəyəri ilə şəklin necə görünəcəyinə baxaq:

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

Nümunə

İndi isə gəlin background-blend-mode xüsusiyyətinin dəyərini vurma ilə dəyişək:

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

Nümunə

Gəlin şəklimiz üçün açıqlaşdırma rejimini təyin edək:

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

Həmçinin bax

fon üçün qısaldılmış xüsusiyyət olan background xüsusiyyəti
bloka arxa plan şəkli təyin etmək üçün istifadə olunan background-image xüsusiyyəti
əsas rəngləri arxa plan şəkli üzərində qarışdırmaq üçün istifadə olunan mix-blend-mode xüsusiyyəti
filtirləri tətbiq etməyə imkan verən backdrop-filter xüsusiyyəti