background-blend-mode касиети

background-blend-mode касиети фондук сүрөттү фондук түскө же башка сүрөттөргө кошуу режимин белгилейт. Бул касиетте ошондой эле бир нече маанилерди үтүр менен бөлүп көрсөтүүгө болот, алар ошол эле тартипте колдонулат. Касиет үчүн маанилер графикалык редакторлордун негизги режимдерине окшош.

Синтаксис

cssтандоочу {
  background-blend-mode: режимдер;
}

Төмөндөгү таблицада background-blend-mode касиети үчүн негизги маанилер келтирилген:

Маанилер

Маани	Сүрөттөмө
`normal`	Кадимки. Түстөрдү аралаштыруу колдонулбайт. Демейки режим.
`multiply`	Көбөйтүү. Бул режимде негизги түстүн мааниси кошулган түстүн маанисине көбөйтүлөт. Натыйжадагы түс ар дайым караңгыраак түс болот.
`screen`	Жарыктандыруу. Бул режимде негизги жана кошулган түстөрдүн тескери маанилери көбөйтүлөт. Натыйжадагы түс катары ар дайым жарыкыраак түс колдонулат.
`overlay`	Каптоо. Бул режимде түстөр көбөйтүлөт же жарыктандырылат, негизги түстүн өзгөчөлүгүнө жараша. Өрнөктөр же түстөр бар пикселдерди каптап, негизги түстүн жарык жана караңгы бөлүктөрүн өзгөртпөй калтырат.

Мисал

Келгиле, сүрөт background-blend-mode касиетинин демейки мааниси менен кандай көрүнө тургандыгын көрөлү:

html<div id="elem"></div>

css#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 касиетинин маанисин көбөйтүүгө өзгөртөлү:

html<div id="elem"></div>

css#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;
}

Результат:

Мисал

Келгиле, биздин сүрөтүбүз үчүн жарыктандыруу режимин орнотолу:

html<div id="elem"></div>

css#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 касиети,
фильтрлерди кошууга мүмкүндүк берет