Mix-blend-mode xususiyati

mix-blend-mode xususiyati asl rangni fon rangi yoki fon tasviri ustiga qo‘yish rejimini belgilaydi. Xususiyat qiymatlari grafik muharrirlarning asosiy rejimlariga o‘xshaydi.

Sintaksis

cssselektor {
  mix-blend-mode: qiymatlar;
}

Quyidagi jadvalda mix-blend-mode xususiyati uchun asosiy qiymatlar keltirilgan:

Qiymatlar

Qiymat	Tavsif
`normal`	Oddiy. Ranglarni aralashtirish ishlatilmaydi. Boshlang‘ich rejim.
`multiply`	Ko‘paytirish. Ushbu rejimda asosiy rang qiymati birlashtirilgan rang qiymatiga ko‘paytiriladi. Natijaviy rang har doim qorong‘iroq rang bo‘ladi.
`screen`	Ochrash. Ushbu rejimda asosiy va birlashtirilgan ranglarning teskari qiymatlari ko‘paytiriladi. Natijaviy rang sifatida har doim yorqinroq rang qo‘llaniladi.
`overlay`	Qoplash. Ushbu rejimda ranglar asosiy rangga bog‘liq holda ko‘paytiriladi yoki ochriladi. Naqshlar yoki ranglar mavjud piksellarni qoplaydi, asosiy rangning yorug‘ va qorong‘u qismlarini o‘zgartirmay qoldiradi.

Misol

Keling, mix-blend-mode xususiyatining boshlang‘ich qiymati bilan tasvir qanday ko‘rinishini ko‘ramiz:

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

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

Результат:

Misol

Endi esa qo‘yish rejimini ko‘paytirishga o‘zgartiramiz:

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

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

Результат:

Misol

Keling, mix-blend-mode xususiyatiga qoplash qiymatini beraylik:

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

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

Результат:

Shuningdek qarang

fon uchun qisqartma xususiyat bo‘lgan background xususiyati
blokka fon tasvirini berish uchun ishlatiladigan background-image xususiyati
fon tasvirini fon rangiga qo‘yish uchun ishlatiladigan background-blend-mode xususiyati