hsla() funksiyasi
CSS hsl() funksiyasi rangni Hue-Saturation-Lightness (tus-to‘yinganlik-yorug‘lik) modeli (HSL) yordamida belgilaydi. Shuningdek, ixtiyoriy alfa komponentini ham qo‘shish mumkin (u rangning shaffofligini bildiradi).
Maslahat: HSL — Hue (tus), Saturation (to‘yinganlik) va Lightness (yorug‘lik) so‘zlarining qisqartmasi bo‘lib, ranglarning silindrik koordinatalardagi ifodasini bildiradi.
Eslatma: hsla() funksiyasi hsl() funksiyasining taxallusi (alias) hisoblanadi. hsl() funksiyasidan foydalanish tavsiya etiladi.
Misol
Turli HSL(A) ranglarini belgilang:
#p1 {background-color:hsl(120 100% 50%);} /* green */
#p2 {background-color:hsl(120 100% 75%);} /* light green */
#p3 {background-color:hsl(120 100% 25%);} /* dark green */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* dark green with opcaity */
#p5 {background-color:hsl(120 60% 70%);} /* pastel green */
#p6 {background-color:hsl(290 100% 50%);} /* violet */
#p7 {background-color:hsl(290 60% 70%);} /* pastel violet */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* pastel violet with opacity */
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 | |||||
|---|---|---|---|---|---|
| hsl() | 1 | 9 | 1 | 3.1 | 9.5 |
| Alfa parametrli hsl() | 65 | 79 | 52 | 12.1 | 52 |
| Bo‘sh joy bilan ajratilgan parametrlar | 65 | 79 | 52 | 12.1 | 52 |
CSS sintaksisi
Mutlaq qiymat sintaksisi
hsl(hue saturation lightness / A)
| Qiymat | Tavsif |
|---|---|
| hue | Majburiy. Rang g‘ildiragidagi gradusni belgilaydi (0 dan 360 gacha) — 0 (yoki 360) qizil, 120 yashil, 240 ko‘k |
| saturation | Majburiy. Rangning to‘yinganligini belgilaydi; 0% — kulrang tus, 100% — to‘liq rang (to‘liq to‘yinganlik). None ham ishlatilishi mumkin (0% bilan bir xil) |
| lightness | Majburiy. Rangning yorug‘ligini belgilaydi; 0% — qora, 50% — oddiy, 100% — oq. None ham ishlatilishi mumkin (0% bilan bir xil) |
| / A | Ixtiyoriy. Rangning alfa kanali qiymatini bildiradi (0% (yoki 0) — to‘liq shaffofdan 100% (yoki 100) — to‘liq noshaffofgacha). None ham ishlatilishi mumkin (alfa kanali yo‘qligini bildiradi). Standart qiymat: 100% |
Nisbiy qiymat sintaksisi
hsl(from color hue saturation lightness / A)
| Qiymat | Tavsif |
|---|---|
| from color | from kalit so‘zi bilan boshlang, undan keyin asl rangni ifodalovchi color qiymati keladi. Bu nisbiy rang asoslanadigan asl rangdir |
| hue | Majburiy. Rang g‘ildiragidagi gradusni belgilaydi (0 dan 360 gacha) — 0 (yoki 360) qizil, 120 yashil, 240 ko‘k |
| saturation | Majburiy. Rangning to‘yinganligini belgilaydi; 0% — kulrang tus, 100% — to‘liq rang (to‘liq to‘yinganlik). None ham ishlatilishi mumkin (0% bilan bir xil) |
| lightness | Majburiy. Rangning yorug‘ligini belgilaydi; 0% — qora, 50% — oddiy, 100% — oq. None ham ishlatilishi mumkin (0% bilan bir xil) |
| / A | Ixtiyoriy. Rangning alfa kanali qiymatini bildiradi (0% (yoki 0) — to‘liq shaffofdan 100% (yoki 100) — to‘liq noshaffofgacha). None ham ishlatilishi mumkin (alfa kanali yo‘qligini bildiradi). Standart qiymat: 100% |
| Versiya: | CSS3 |
|---|
Ko‘proq misollar
Misol
Vergul bilan ajratilgan qiymatlarga ega eski sintaksis:
#p1 {background-color:hsl(120, 100%, 50%);} /* green */
#p2 {background-color:hsl(120, 100%, 75%);} /* light green */
#p3 {background-color:hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color:hsl(120, 60%, 70%);} /* pastel green */
#p5 {background-color:hsl(290, 100%, 50%);} /* violet */
#p6 {background-color:hsl(290, 60%, 70%);} /* pastel violet */
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS HSL ranglari.
CSS ma’lumotnomasi: CSS ranglari.
CSS ma’lumotnomasi: CSS hwb() funksiyasi.
CSS ma’lumotnomasi: CSS lab() funksiyasi.
CSS ma’lumotnomasi: CSS lch() funksiyasi.
CSS ma’lumotnomasi: CSS oklab() funksiyasi.
CSS ma’lumotnomasi: CSS oklch() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!