mix-blend-mode хусусияти

mix-blend-mode хусусияти аслангий рангни фон ранги ёки фон суратига қўшиш режимини белгилайди. Хусусият учун қийматлар графика редакторларининг асосий режимларига ўхшайди.

Синтаксис

селектор {
	mix-blend-mode: қийматлар;
}

Жадвалда mix-blend-mode хусусияти учун асосий қийматлар келтирилган:

Қийматлар

Қиймат	Тасвир
`normal`	Оддий. Рангларни аралаштириш ишлатилмайди. Андоза режими.
`multiply`	Кўпайтириш. Ушбу режимда асосий рангнинг қиймати бирлашган рангнинг қийматига кўпайтирилади. Натижадаги ранг ҳар доим қораранғи ранг бўлади.
`screen`	Очиштириш. Ушбу режимда асосий ва бирлашган рангнинг тескари қийматлари кўпайтирилади. Натижадаги ранг сифатида ҳар доим ёруғроқ ранг қўлланилади.
`overlay`	Қоплаш. Ушбу режимда ранглар асосий рангга боғлиқ холда кўпайтирилади ёки очиштирилади. Нақшлар ёки ранглар мавжуд пикселларни қоплаб, асосий рангнинг ёруг ва қораранғи қисмларини ўзгартирмасдан қолдиради.

Мисол

mix-blend-mode хусусиятининг андоза қиймати билан сурат қандай кўринишини кўрамиз:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Мисол

Энди қўшиш режимини кўпайтиришга ўзгартирамиз:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Мисол

mix-blend-mode хусусиятига қоплаш қийматини белгилаймиз:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Ҳам қаранг

фон учун қисқартирилган хусуят бўлган background хусусияти
блокка фон суратини белгилаш имконини берадиган background-image хусусияти
фон суратини фон рангига қўшиш имконини берадиган background-blend-mode хусусияти