HTML နောက်ခံပုံများ
နောက်ခံပုံတစ်ပုံကို HTML ဒြပ်စင်တိုင်းနီးပါးအတွက် သတ်မှတ်နိုင်ပါသည်။
HTML အစိတ်အပိုင်းတစ်ခုပေါ်ရှိ နောက်ခံပုံ
HTML ဒြပ်စင်တစ်ခုပေါ်တွင် နောက်ခံပုံတစ်ပုံကို ထည့်ရန် HTML styleရည်ညွှန်းချက်နှင့် CSS background-imageပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
ဥပမာ
HTML အစိတ်အပိုင်းတစ်ခုပေါ်တွင် နောက်ခံပုံတစ်ပုံကို ထည့်ပါ-
<div style="background-image: url('img_girl.jpg');">
ကဏ္ဍတွင် <style>
၊ ဒြပ်စင် ရှိ နောက်ခံပုံကိုလည်း သင် သတ်မှတ်နိုင်သည် -<head>
ဥပမာ
ဒြပ်စင် ရှိ နောက်ခံပုံကို သတ်မှတ်ပါ <style>
-
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
စာမျက်နှာတစ်ခုရှိ နောက်ခံပုံ
<body>စာမျက်နှာတစ်ခုလုံးကို နောက်ခံပုံဖြစ်စေလိုပါက၊ ဒြပ် စင်ပေါ်ရှိ နောက်ခံပုံအား သင်သတ်မှတ်ရပါမည် -
ဥပမာ
စာမျက်နှာတစ်ခုလုံးအတွက် နောက်ခံပုံတစ်ခု ထည့်ပါ-
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
နောက်ခံ အထပ်ထပ်
နောက်ခံပုံသည် ဒြပ်စင်ထက် သေးငယ်ပါက၊ ပုံသည် ဒြပ်စင်၏ အဆုံးသို့ ရောက်သည်အထိ အလျားလိုက် နှင့် ဒေါင်လိုက် အထပ်ထပ်ရှိလိမ့်မည်-
ဥပမာ
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
နောက်ခံပုံကို သူ့အလိုလို ထပ်မဖြစ်အောင်၊ background-repeatပိုင်ဆိုင်မှုကို သတ်မှတ်ပါ no-repeat။
ဥပမာ
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
နောက်ခံကာဗာ
နောက်ခံပုံသည် ဒြပ်စင်တစ်ခုလုံးကို ဖုံးလွှမ်းလိုပါက၊ သင်သည် background-sizeပိုင်ဆိုင်မှုကို
သတ်မှတ်နိုင်သည်။cover.
ထို့အပြင်၊ ဒြပ်စင်တစ်ခုလုံးကို အမြဲဖုံးလွှမ်းထားကြောင်း သေချာစေရန်၊
background-attachmentပိုင်ဆိုင်မှုကို သတ်မှတ်ပါ။fixed:
ဤနည်းအားဖြင့်၊ နောက်ခံပုံသည် ဆန့်ထုတ်ခြင်းမရှိဘဲ ဒြပ်စင်တစ်ခုလုံးကို ဖုံးလွှမ်းသွားလိမ့်မည် (ပုံသည် ၎င်း၏မူလအချိုးအစားများကို ထိန်းသိမ်းထားလိမ့်မည်)။
ဥပမာ
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
နောက်ခံအဆန့်
နောက်ခံပုံအား ဒြပ်စင်တစ်ခုလုံးနှင့် အံဝင်ခွင်ကျဖြစ်အောင် ဆွဲဆန့်လိုပါက၊ background-sizeပိုင်ဆိုင်မှုကို
သင်သတ်မှတ်နိုင်သည် 100% 100%-
ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းကြည့်ပါ၊ ပုံသည် ဆန့်ထွက်မည်ဖြစ်သော်လည်း ဒြပ်စင်တစ်ခုလုံးကို အမြဲတမ်း ဖုံးအုပ်ထားကြောင်း သင်တွေ့ရပါမည်။
ဥပမာ
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
CSS ကိုပိုမိုလေ့လာပါ။
အထက်ဖော်ပြပါ နမူနာများမှ CSS နောက်ခံဂုဏ်သတ္တိများကို အသုံးပြုခြင်းဖြင့် နောက်ခံပုံများကို ပုံစံချနိုင်သည်ကို သင်သိရှိလာခဲ့သည်။
CSS နောက်ခံဂုဏ်သတ္တိများအကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Background Tutorial ကို လေ့လာ ပါ။