Хосияти mix-blend-mode

Хосияти mix-blend-mode реҷаи омехтани ранги аслии бо ранги замина ё тасвири заминаро муайян мекунад. Қиматҳо барои хосият монанд ба реҷаҳои асосии барномаҳои графикӣ мебошанд.

Синтаксис

cssинтихобкунанда {
  mix-blend-mode: қимат;
}

Дар ҷадвал қиматҳои асосии барои хосияти mix-blend-mode оварда шудаанд:

Қиматҳо

Қимат	Тавсиф
`normal`	Оддӣ. Омехтани рангҳо истифода намешавад. Реҷаи пешфарз.
`multiply`	Зарб. Дар ин реҷа қимати ранги асосӣ зарб мешавад ба қимати ранги ҳамроҳшуда. Ранги натиҷа ҳамеша ранги ториқтарро ифода мекунад.
`screen`	Равшансозӣ. Дар ин реҷа қиматҳои баръакси ранги асосӣ ва ранги ҳамроҳшуда зарб мешаванд. Ҳамчун ранги натиҷа ҳамеша ранги равшантар татбиқ мешавад.
`overlay`	Пӯшиш. Дар ин реҷа рангҳо зарб ё равшан карда мешаванд вобаста ба ранги асосӣ. Нақшунугорҳо ё рангҳо пикселҳои мавҷударо мепӯшанд, боқимондаҳои равшан ва торики ранги асосиро тағйирнодида мегузоранд.

Намуна

Биёед бинем, ки тасвир бо қимати пешфарзи хосияти mix-blend-mode чӣ гуна ба намош меояд:

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

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

Результат:

Намуна

Ва акнун биёед реҷаи омехтанро ба зарб иваз кунем:

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

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

Результат:

Намуна

Биёед ба хосияти mix-blend-mode қимати пӯшишро додан кунем:

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

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

Результат:

Ҳамчунин бинед

хосияти background,
ки хосияти кӯтоҳкардашуда барои замина мебошад
хосияти background-image,
бо ёрии он ба блок метавон тасвири замина дод
хосияти background-blend-mode,
бо ёрии он метавон тасвири заминаро бар ранги замина омехт