CSS HSL အရောင်

HSL အရေဒီယို

CSS တွင် အပန်း၊ အရိယာများ နှင့် အမြင့်အနည်း (HSL) ကို အရေဒီယို သတ်မှတ်ထားနိုင် သည်။ ပြုအပ်ပုံ အောက်ပါအတိုင်းဖြစ်သည်:

hsla(hue, saturation, lightness)

အပန်း (hue）သည် အချိန်အောက်တွင် 0 မှ 360 အထိ အဆင်းမြင့် ဖြစ် သည်။ 0 က အပန်း ဖြစ် ပြီး 120 က အဖျား ဖြစ် ပြီး 240 က အလင်းချို ဖြစ် သည်。

အရိယာများ (saturation）သည် အချိန်အောက်တွင် ဖြစ် သည်။ 0% က အရေဒီယို အတန်း ဖြစ် ပြီး 100% က အရေဒီယို ဖြစ် သည်。

အမြင့်အနည်း (lightness）သည် အချိန်အောက်တွင် ဖြစ် သည်။ 0% က အမြီး ဖြစ် ပြီး 50% က အကြပ်သော/အမြင့်မသိသော ဖြစ် သည်။ 100% က အမြီး ဖြစ် သည်。

အောက်ပါ HSL အရေဒီယို ကို ပေါင်းစပ်ထားပြီး စမ်းသပ်ထားကြပါ:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

实例

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

亲自试一试

အရိယာများ

အရေဒီယို၏ အရိယာများ ကို အရေဒီယို၏ အာရုံကြောင်း ဖော်ပြနိုင်သည်。

100% က အရေဒီယို ဖြစ် ပြီး အရေဒီယို အတန်း မရှိ

50% က 50% အရေဒီယို ဖြစ် ပြီး အရေဒီယို မြင်နိုင်ပါ။

0% က ပိုကြီးတော့ အရေဒီယို မမြင်နိုင်ပါ။

实例

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

亲自试一试

အမြင့်အနည်း

အရေဒီယို၏ အမြင့်အနည်း ကို အရေဒီယို ကို ပေးထားသော အဆင်းမြင့် ကို ဖော်ပြနိုင် လောက် ဖြစ် သည်။ 0% က အမြင့်အနည်း မရှိ (အမြီး) ဖြစ် သည်။ 50% က 50% အမြင့်အနည်း (အကြပ်သော/အမြင့်မသိသော) ဖြစ် သည်။ 100% က အမြင့်အနည်း ဖြစ် သည်。

实例

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

亲自试一试

အများသုံး ဖြင့် အရောင်၏ အရောင်သုံး နှင့် အရောင်အတန်း ကို 0 ကို သတ်မှတ်ထားပြီး 0% မှ 100% အထိ အရိယာများ ကို ပြန်လည် ပြင်ဆင်ထားပြီး ပိုသော/ပိုနည်းသော အရောင်သုံး ကို သတ်မှတ်ထားသည်:

实例

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

亲自试一试

HSLA အရေဒီယို

HSLA အရေဒီယို သည် အေအိုပီ ခွဲခြမ်းခြောက် အရေဒီယို ကို ဖွဲ့စည်းထားသည် - သူ့ အရေဒီယို အတွက် အတန်းအတိုင်း ကို သတ်မှတ်ထားသည်。

HSLA အရေဒီယို ကို သတ်မှတ်ထားသည် -

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

请通过混合以下 HSLA 值进行实验：

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

实例

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

亲自试一试