CSS နောက်ခံများ
CSS နောက်ခံဂုဏ်သတ္တိများကို ဒြပ်စင်များအတွက် နောက်ခံသက်ရောက်မှုများထည့်ရန် အသုံးပြုသည်။
ဤအခန်းများတွင် အောက်ပါ CSS နောက်ခံဂုဏ်သတ္တိများအကြောင်း သင်လေ့လာနိုင်ပါမည်-
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background
(အတိုကောက်ပိုင်ဆိုင်မှု)
CSS နောက်ခံအရောင်
background-color
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခု၏ နောက်ခံအရောင်ကို သတ်မှတ်သည် ။
ဥပမာ
စာမျက်နှာတစ်ခု၏ နောက်ခံအရောင်ကို ဤကဲ့သို့ သတ်မှတ်သည်-
body {
background-color: lightblue;
}
CSS ဖြင့်၊ အရောင်တစ်ခုကို အများဆုံးသတ်မှတ်သည်-
- တရားဝင်အရောင်အမည် - "အနီရောင်" ကဲ့သို့
- HEX တန်ဖိုး - "#ff0000" ကဲ့သို့
- RGB တန်ဖိုး - "rgb(255,0,0)" ကဲ့သို့၊
ဖြစ်နိုင်ချေရှိသော အရောင်တန်ဖိုးများစာရင်းအပြည့်အစုံအတွက် CSS Color Values ကို ကြည့်ပါ ။
အခြားဒြပ်စင်များ
HTML ဒြပ်စင်များအတွက် နောက်ခံအရောင်ကို သင်သတ်မှတ်နိုင်သည်-
ဥပမာ
ဤတွင်၊ <h1>၊ <p> နှင့် <div> ဒြပ်စင်များတွင် မတူညီသော နောက်ခံအရောင်များ ရှိလိမ့်မည်-
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Opacity/Transparency
ပိုင်ဆိုင်မှု သည် opacity
ဒြပ်စင်တစ်ခု၏ ပွင့်လင်းမြင်သာမှု/ပွင့်လင်းမှုကို သတ်မှတ်သည်။ ၎င်းသည် 0.0 မှ 1.0 တန်ဖိုးအထိ ယူနိုင်သည်။ တန်ဖိုးနိမ့်လေ၊ ပိုမိုပွင့်လင်းလေဖြစ်သည်-
အလင်းပိတ်ခြင်း ၁
opacity 0.6
opacity 0.3
opacity 0.1
ဥပမာ
div {
background-color: green;
opacity: 0.3;
}
မှတ်ချက်- ဒြပ်စင်တစ်ခု၏ နောက်ခံတွင် ပွင့်လင်းမြင်သာမှုထည့်ရန် ပိုင်ဆိုင်မှု ကို အသုံးပြုသောအခါ opacity
၊ ၎င်း၏ ကလေးဒြပ်စင်အားလုံးသည် တူညီသော ပွင့်လင်းမြင်သာမှုကို အမွေဆက်ခံသည်။ ၎င်းသည် အပြည့်အဝ ပွင့်လင်းမြင်သာသော ဒြပ်စင်အတွင်းရှိ စာသားကို ဖတ်ရခက်စေသည်။
RGBA ကို အသုံးပြု၍ ပွင့်လင်းမြင်သာမှု
အထက်ဖော်ပြပါ ဥပမာတွင်ကဲ့သို့ ကလေးဒြပ်စင်များတွင် အလင်းပိတ်ခြင်းကို မသုံးလိုပါက RGBA အရောင်တန်ဖိုးများကို အသုံးပြုပါ။ အောက်ဖော်ပြပါ ဥပမာသည် နောက်ခံအရောင်အတွက် အလင်းပိတ်မှုကို စာသားအဖြစ် သတ်မှတ်ပေးသည်-
100% အလင်းပိတ်
60% အလင်းပိတ်
30% အလင်းပိတ်
10% အလင်းပိတ်
RGB ကို အရောင်တန်ဖိုးတစ်ခုအနေနဲ့ သုံးနိုင်တယ်ဆိုတာ ကျွန်ုပ်တို့ရဲ့ CSS Colors Chapter မှာ သင်သင်ယူခဲ့ပါတယ် ။ RGB အပြင်၊ သင်သည် အရောင် တစ်ခုအတွက် opacity ကိုသတ်မှတ်ပေးသည့် alpha channel (RGB A ) ဖြင့် RGB အရောင်တန်ဖိုးကို သုံးနိုင်သည်။
RGBA အရောင်တန်ဖိုးကို rgba(အနီ၊ အစိမ်း၊ အပြာ၊ အယ်လ်ဖာ ) ဖြင့် သတ်မှတ်ထားသည်။ အယ်လ် ဖာ ကန့်သတ်ဘောင်သည် 0.0 (အပြည့်အ၀ ဖောက်ထွင်းမြင်ရ) နှင့် 1.0 (အပြည့်အ၀ opaque) အကြား နံပါတ်တစ်ခုဖြစ်သည်။
အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS အရောင်များအခန်း တွင် RGBA အရောင်များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည် ။
ဥပမာ
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}