color-mix()
CSS color-mix() funksiyasi ikkita rang qiymatini berilgan rang fazosida (colorspace) berilgan miqdorda aralashtiradi.
Misol
Ikkita rang qiymatini hsl rang fazosida berilgan miqdorda aralashtiring:
div {
padding: 15px;
border: 2px solid black;
background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| color-mix() | 111 | 111 | 113 | 16.2 | 97 |
CSS sintaksisi
color-mix(color-interpolation-method, color1 %, color2 %)
| Qiymat | Tavsif |
|---|---|
| color-interpolation-method | Majburiy. Qaysi rang interpolyatsiyasi usuli ishlatilishini belgilaydi. U in kalit so‘zi va undan keyin keladigan rang fazosi nomidan iborat. Quyidagi ikki tur mavjud:
|
| color1 % | Majburiy. Aralashtiriladigan rang qiymati va rang miqdorini belgilaydigan 0% dan 100% gacha bo‘lgan ixtiyoriy foiz qiymati. Standart foiz qiymati: 50% |
| color2 % | Majburiy. Aralashtiriladigan rang qiymati va rang miqdorini belgilaydigan 0% dan 100% gacha bo‘lgan ixtiyoriy foiz qiymati. Standart foiz qiymati: 50% |
| Versiya: | CSS Color moduli, 5-daraja |
|---|
Ko‘proq misollar
Misol
Ikkita rang qiymatini oklab rang fazosida turli miqdorlarda aralashtiring:
li:nth-child(1) {
background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
background-color: color-mix(in oklab, #6a5acd 100%, pink);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS ranglari.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!