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 хусусияти,
фильтрларни қоплашга имкон беради