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