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 касиети,
анын жардамы менен фон сүрөтүн фон түсүнө кошсо болот