CSS အရောင်

CSS ထောက်ပံ့ 140 ပေါင်း အရောင် အမည်နှင့် အသုံးပြုသော အရောင် အမှတ် (ဟန်းဆိုး အရောင်အမှတ်)、RGB အရောင်အမှတ်、RGBA အရောင်အမှတ်、HSL အရောင်အမှတ်、HSLA အရောင်အမှတ် နှင့် အမြင့်တူညီသော အသုံးပြုသည်。

RGBA အရောင်

RGBA အရောင်အမှတ် သည် RGB အရောင်အမှတ် ကို ထပ်ပေါင်းထား သော အရောင် အသုံးပြုသော အသင်း ဖြစ် ပြီး အရောင်၏ အမြင့်တူညီသော အသုံးပြုသည်。

RGBA အရောင်အမှတ် သည် ထိုသို့ ဒေါ်လုပ်ထားသည်: rgba(red, green, blue, alpha)。 alpha အရာဝတ္တရ သည် 0.0 (အပြင်းကြီး မပါ) မှ 1.0 (အပြင်းကြီး မပါ) အကြား ဖြစ်သည် အချက်အလက် ဖြစ်သည်。

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

အောက်ရှိ အမှတ်အသား သည် မတူညီသော RGBA အရောင်ကို ဒေါ်လုပ်သည်:

实例

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* အမြင့်တူညီသော အမြောက် */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* အမြင့်တူညီသော အင်္ဂါလိုင်း */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* အမြင့်တူညီသော ဘေး */

亲自试一试

HSL အရောင်

HSL သည် အရောင်အစိတ် (Hue)、အရောင်အကျိုး (Saturation) နှင့် အရောင်အမြင့် (Lightness) ကို ညွှန်ပြသည်。

HSL အရောင်အမှတ် သည် ထိုသို့ အုပ်ချုပ်ထားသည်: hsl(hue, saturation, lightness)。

အရောင်အစိတ် သည် အရောင်လှည့်တန်း ပေါ်တွင် အခြေအနေ ဖြစ်သည် (0 မှ 360 သို့ ရွေးချယ်ကြသည်):

  • 0 (သို့မဟုတ် 360) သည် အရောင် အမြောက် ဖြစ်သည်
  • 120 သည် အရောင် အင်္ဂါလိုင်း ဖြစ်သည်
  • 240 သည် အရောင် ဘေးသည်

အရောင်အကျိုး တူညီသော ရာခိုင်နှုန်း တစ်ခု ဖြစ်သည်: 100% သည် အရောင်အရိုး ဖြစ်သည်。

အရောင်၏ အမြင့်အား တူညီသော ရာခိုင်နှုန်း တစ်ခု ဖြစ်သည်: 0% သည် ရောင်ရှိသော ရောင်ရှိသော အရောင်ဖြစ် (ရဲရောင်) ဖြစ် ပြီး 100% သည် ရဲရှိသော အရောင်ဖြစ်သည်。

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

အောက်ဆုံး အကျိုးသတ်မှု သည် အမျိုးမျိုးသော HSL အငွေး ဖော်ပြသည်:

实例

#p1 {background-color: hsl(120, 100%, 50%);}  /* အသားကြီး အငွေး */
#p2 {background-color: hsl(120, 100%, 75%);}  /* အသားကြီး အငွေး */
#p3 {background-color: hsl(120, 100%, 25%);}  /* အသားကြီး အငွေး */
#p4 {background-color: hsl(120, 60%, 70%);}   /* အသားကြီး အငွေားပါ အငွေး */

亲自试一试

HSLA အငွေး

HSLA အငွေားအား သည် Alpha ခွဲခြားခြင်း ဖြင့် HSL အငွေားအား ဖျင်းပြီး အငွေားပါ ဖြစ်သည် - သည် အငွေး အလွှားပါ ကို ဖော်ပြသည်。

HSLA အငွေားအား သည် အောက်ဆုံး သဘောတူ ကို ဖော်ပြသည်: hsla(hue, saturation, lightness, alpha)，အကျုံးသတ်မှု သည် အလွှားပြု ဖြစ်သည်။ alpha အကျုံးသတ်မှု သည် 0.0 (အလွှားသား) နှင့် 1.0 (အလွှားမမြတ်) အကြား ဖြစ်သော နှုန်းသတ်မှု ဖြစ်သည်။

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

အောက်ဆုံး အကျိုးသတ်မှု သည် အမျိုးမျိုးသော HSLA အငွေားအား ဖော်ပြသည်:

实例

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* အလွှားပါ အသားကြီး အငွေား */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* အလွှားပါ အသားကြီး အငွေားပါ အငွေား */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* အလွှားပါ အသားကြီး အငွေားပါ အငွေား */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* အလွှားပါ အသားကြီး အငွေားပြီး အလွှားသား အငွေား */

亲自试一试

အလွှား

CSS opacity အကျုံးသတ်မှု သည် အကွက်အဖွဲ့ အလွှားပြုပြီး အခြေအနေ သို့မဟုတ် စာရင်း အလွှား/အလွှားသား ဖြစ်သည် (အခြေအနေ သို့မဟုတ် စာရင်း)။

opacity အကျုံးသတ်မှု သည် 0.0 (အလွှားသား) နှင့် 1.0 (အလွှားမမြတ်) အကြား ဖြစ်သော နှုန်းသတ်မှု ဖြစ်သည်။

rgb(255, 0, 0); အလွှား:0.2;
rgb(255, 0, 0); အလွှား:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：

实例

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 带不透明度的蓝色 */

亲自试一试