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
selektor {
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:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Misol
Keling, mix-blend-mode xususiyatiga
qoplash qiymatini beraylik:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Shuningdek qarang
-
fon uchun qisqartma xususiyat bo‘lgan
backgroundxususiyati -
blokka fon tasvirini berish uchun ishlatiladigan
background-imagexususiyati -
fon tasvirini fon rangiga qo‘yish uchun ishlatiladigan
background-blend-modexususiyati