CSS နှောက်ချက်

CSS 背景属性用于定义元素的背景效果。

အခြား အချက်အလက် အချို့ ကို အသိအမှတ်ပြုပါ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color အကိုယ်စိတ် အရောင် သတ်မှတ်ပါ

实例

စားသုံး အရောင် ကို သတ်မှတ်ပါ

body {
  background-color: lightblue;
}

亲自试一试

CSS ကို အရောင် သတ်မှတ်ပါ အပိုင်းအချက် အချို့ ဖြင့် သတ်မှတ်ပါ

  • အရောင် အမည် - အတူ "red"
  • တရားဖြစ်သော အရောင် အတိုင်းအတာ - အတူ "#ff0000"
  • RGB အတိုင်းအတာ - အတူ "rgb(255,0,0)"

ကြည့်တော့ စီစ်ကျည့်ခြင်း အချို့ ပြည်ဆိုင်ရာ စကားလုံးအရောင် အတိုင်းအတာ အချက်အလက် အပြောင်းအလဲ အုပ်ချုပ်ထားသည်။

အခြား အကိုယ်စိတ်

အခြား HTML အကိုယ်စိတ် အား အရောင် ပြင်းပြီး သတ်မှတ်ပါ

实例

အခြား အကိုယ်စိတ် အား သတ်မှတ်ထားသော အရောင် ကို သတ်မှတ်ပါ။

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

亲自试一试

ကြောက်နှုန်း / ကြောက်မှု

opacity အိုပီအတွက် အီအိုပီ ကြောက်နှုန်း ကို သတ်မှတ်ပါ။ အတိုင်းအတာ 0.0 - 1.0 အထိ ရှိသည်။ အတိုင်းအတာ ပြီးချင်း ပိုသော အခါ ပို၍ ကြောက်နှုန်းကြသည်။

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

实例

div {
  background-color: green;
  ကြောက်နှုန်း: 0.3;
}

亲自试一试

အမှန်းချက်။အသုံးပြုပါ ကြောက်နှုန်း အီအိုပီ ကြောက်နှုန်း အပိုင်းဆိုင်ရာ အကိုယ်စိတ် ကို အသုံးပြုပါ အခါ အီအိုပီ ကြောက်နှုန်း အတူ အလွှား အရောင် အား လုပ်ကျွေးစေသည်။ အထူးသဖြင့် အလွှား အရောင် အား လုပ်ကျွေးထားသော အီအိုပီ ကြောက်နှုန်း အကိုယ်စိတ် အတွင်းရှိ အဘာသာ ကို ကြည့်တတ်ခြင်း လွယ်ကူသည်။

RGBA ကြောက်နှုန်း ကို အသုံးပြုပါ

အပိုင်းဆိုင်ရာ အီအိုပီ ကြောက်နှုန်း ကို အသုံးပြုခြင်း မရှိ လျှင် အထူးသဖြင့် အထက်အရာ အမှတ်အသား ကို အသုံးပြုပါ။ RGBA အရောင် အတိုင်းအတာ။ အောက်ပါ အစားအသား က နောက်ခံ အရောင် ကို သတ်မှတ်ကြောင်း သုံးပြီး အဘာသာ ကြောက်နှုန်း ကို သတ်မှတ်မှာ မဟုတ်။

100% ကြောက်နှုန်း
60% ကြောက်နှုန်း
30% opacity
10% opacity

您从我们的 CSS အရောင် 章节中学到了可以将 RGB 用作颜色值。除 RGB 外,还可以将 RGB 颜色值与 alpha 通道一起使用(RGBA) - 该通道指定颜色的不透明度。

RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。

提示:您可在我们的 CSS အရောင် 一章中学到有关 RGBA 颜色的更多知识。

实例

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

亲自试一试