Xususiyat background-blend-mode

background-blend-mode xususiyati fon rasmini fon rangiga yoki boshqa rasmlarga qo‘shish rejimini belgilaydi. Ushbu xususiyatda vergul bilan ajratilgan bir nechta qiymatlarni ham ko‘rsatish mumkin, ular xuddi shu tartibda qo‘llaniladi. Xususiyat uchun qiymatlar asosiy grafik muharrirlarning asosiy rejimlariga o‘xshaydi.

Sintaksis

selector {
	background-blend-mode: rejimlar;
}

Jadvalda background-blend-mode xususiyati uchun asosiy qiymatlar keltirilgan:

Qiymatlar

Qiymat	Tavsif
`normal`	Oddiy. Ranglarni aralashtirish ishlatilmaydi. Standart rejim.
`multiply`	Ko‘paytirish. Ushbu rejimda asosiy rang qiymati birlashtirilgan rang qiymatiga ko‘paytiriladi. Natijaviy rang har doim qorong‘iroq rangni ifodalaydi.
`screen`	Yoritish. Ushbu rejimda asosiy va birlashtirilgan rangning teskari qiymatlari ko‘paytiriladi. Natijaviy rang sifatida har doim yorqinroq rang qo‘llaniladi.
`overlay`	Qopqoq. Ushbu rejimda ranglar asosiy rangga bog‘liq holda ko‘paytiriladi yoki yoritiladi. Naqshlar yoki ranglar mavjud piksellarni qoplab, asosiy rangning yorug‘ va qorong‘u qismlarini o‘zgartirmay qoldiradi.

Misol

Keling, rasm background-blend-mode xususiyatining standart qiymati bilan qanday ko‘rinishini ko‘ramiz:

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

Misol

Endi esa background-blend-mode xususiyatining qiymatini ko‘paytirishga o‘zgartiramiz:

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

Misol

Keling, rasmimiz uchun yoritish rejimini o‘rnatamiz:

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

Shuningdek qarang

fon uchun qisqartma xususiyat bo‘lgan background xususiyati
background-image xususiyati,
uning yordamida blokka fon rasmni berish mumkin
mix-blend-mode xususiyati,
uning yordamida boshlang‘ich ranglarni fon rasmi ustiga qo‘yish mumkin
filtrlarni qo‘llash imkonini beruvchi backdrop-filter xususiyati