CSS နောက်ခံများစွာ

ဤအခန်းတွင် နောက်ခံပုံများစွာကို ဒြပ်စင်တစ်ခုသို့ မည်သို့ထည့်ရမည်ကို လေ့လာပါမည်။

အောက်ဖော်ပြပါ ဂုဏ်သတ္တိများအကြောင်းကိုလည်း သင်လေ့လာနိုင်လိမ့်မည်-

background-size
background-origin
background-clip

CSS နောက်ခံများစွာ

background-imageCSS သည် သင့်အား ပိုင်ဆိုင်မှု မှတဆင့် ဒြပ်စင်တစ်ခုအတွက် နောက်ခံပုံများစွာကို ထည့်သွင်းနိုင်စေ ပါသည်။

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

အောက်ပါဥပမာတွင် နောက်ခံပုံနှစ်ပုံရှိပြီး ပထမပုံသည် ပန်းပွင့် (အောက်ခြေနှင့် ညာဘက်သို့ ညှိထားသည်) နှင့် ဒုတိယပုံသည် စက္ကူနောက်ခံပုံဖြစ်သည် (ဘယ်ဘက်အပေါ်ထောင့်သို့ ညှိထားသည်)

ဥပမာ

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

နောက်ခံပုံအများအပြားကို တစ်ဦးချင်း နောက်ခံဂုဏ်သတ္တိများ (အထက်ပါအတိုင်း) သို့မဟုတ် backgroundအတိုကောက် ပိုင်ဆိုင်မှုကို အသုံးပြု၍ သတ်မှတ်နိုင်ပါသည်။

အောက်ဖော်ပြပါ ဥပမာသည် လက် backgroundတိုပိုင်ဆိုင်မှုကို အသုံးပြုသည် (အထက်ပါဥပမာကဲ့သို့ ရလဒ်နှင့် တူညီသည်)။

ဥပမာ

#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS နောက်ခံအရွယ်အစား

CSS background-sizeပိုင်ဆိုင်မှုသည် သင့်အား နောက်ခံပုံများ၏ အရွယ်အစားကို သတ်မှတ်ခွင့်ပြုသည်။

အရွယ်အစားကို အလျား၊ ရာခိုင်နှုန်းများ သို့မဟုတ် သော့ချက်စာလုံး နှစ်ခုအနက်မှ တစ်ခုအသုံးပြုခြင်းဖြင့် သတ်မှတ်နိုင်သည်- ပါဝင်ရန် သို့မဟုတ် ကာဗာ။

အောက်ဖော်ပြပါ ဥပမာသည် နောက်ခံပုံတစ်ပုံကို မူရင်းပုံထက် များစွာသေးငယ်သည် (ပစ်ဇယ်များကို အသုံးပြုထားသည်)

နာကျင်မှုအတွက် ကျေးဇူးတင်ပါသည်။

နာကျင်မှုက အချစ်ပဲ။

အဲဒါက နည်းနည်းလေးမှ ဖြစ်လာတာဆိုတော့ ကျွန်တော်တို့ရဲ့ ပုံမှန်အလေ့အကျင့်က အကျိုးဆက်တွေကို အခွင့်ကောင်းယူဖို့၊

ဤတွင် ကုဒ်ဖြစ်ပါသည်

ဥပမာ

#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}

နှင့် . _ background-size_containcover

သော့ချက်စာလုံး သည် containနောက်ခံပုံကို တတ်နိုင်သမျှ ကျယ်အောင် ချိန်ညှိသည် (သို့သော် ၎င်း၏ အကျယ်နှင့် ၎င်း၏ အမြင့် နှစ်ခုစလုံးသည် အကြောင်းအရာ ဧရိယာအတွင်း ကိုက်ညီရမည်)။ ထို့ကြောင့်၊ နောက်ခံပုံ၏ အချိုးအစားနှင့် နောက်ခံနေရာချထားမှု ဧရိယာပေါ်မူတည်၍ နောက်ခံပုံဖြင့် မဖုံးလွှမ်းထားသော နောက်ခံနေရာအချို့ ရှိနိုင်ပါသည်။

သော့ချက်စာလုံးသည် အကြောင်းအရာဧရိယာကို နောက်ခံပုံဖြင့် လုံးဝဖုံးအုပ်ထားစေရန်အတွက် အဓိက coverစကားလုံးသည် နောက်ခံပုံအား ချိန်ညှိပေးသည် (၎င်း၏အကျယ်နှင့် အမြင့်သည် အကြောင်းအရာဧရိယာနှင့် ညီမျှသည် သို့မဟုတ် ကျော်လွန်သည်)။ ထို့ကြောင့်၊ နောက်ခံပုံ၏ အစိတ်အပိုင်းအချို့ကို နောက်ခံနေရာချထားခြင်းဧရိယာတွင် မမြင်နိုင်ပါ။

အောက်ဖော်ပြပါ ဥပမာသည် အသုံးပြုမှုကို သရုပ်ဖော် containသည် cover။

ဥပမာ

#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}

#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}

နောက်ခံပုံများစွာ၏ အရွယ်အစားကို သတ်မှတ်ပါ။

နောက်ခံ background-sizeများစွာဖြင့် အလုပ်လုပ်သောအခါတွင် ပိုင်ဆိုင်မှုသည် နောက်ခံအရွယ်အစား (ကော်မာ-ခြားထားသောစာရင်းကို အသုံးပြု၍) အတွက် တန်ဖိုးများစွာကိုလည်း လက်ခံပါသည်။

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

ဥပမာ

#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}

အရွယ်အစားအပြည့်အစုံ နောက်ခံပုံ

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

လိုအပ်ချက်များမှာ အောက်ပါအတိုင်းဖြစ်သည်။

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

အောက်ဖော်ပြပါ ဥပမာသည် ၎င်းကို မည်သို့ပြုလုပ်ရမည်ကို ပြသသည်; <html> ဒြပ်စင်ကို အသုံးပြုပါ ( <html> ဒြပ်စင်သည် အမြဲတမ်း အနည်းဆုံး ဘရောက်ဆာဝင်းဒိုး၏ အမြင့်ဖြစ်သည်)။ ထို့နောက် ၎င်းပေါ်တွင် ပုံသေထားပြီး ဗဟိုပြုသော နောက်ခံကို သတ်မှတ်ပါ။ ထို့နောက် ၎င်း၏အရွယ်အစားကို နောက်ခံအရွယ်အစား ပိုင်ဆိုင်မှုဖြင့် ချိန်ညှိပါ-

ဥပမာ

html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}

သူရဲကောင်းပုံရိပ်

ဟီးရိုးရုပ်ပုံ (စာသားပါသော ရုပ်ပုံကြီး) ကိုဖန်တီးရန် <div> တွင် မတူညီသော နောက်ခံဂုဏ်သတ္တိများကို သင်အသုံးပြု၍ သင်အလိုရှိရာ နေရာချနိုင်သည်။

ဥပမာ

.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}

CSS နောက်ခံ-ဇာစ်မြစ် ပိုင်ဆိုင်မှု

CSS background-originပိုင်ဆိုင်မှုသည် နောက်ခံပုံနေရာချထားသည့်နေရာကို သတ်မှတ်ပေးသည်။

ပစ္စည်းသည် မတူညီသော တန်ဖိုးသုံးခုကို ယူသည်-

border-box - နောက်ခံပုံသည် နယ်စပ်၏ ဘယ်ဘက်အပေါ်ထောင့်မှ စတင်သည်။
padding-box - (မူလ) နောက်ခံပုံသည် padding edge ၏ ဘယ်ဘက်အပေါ်ထောင့်မှ စတင်သည်။
content-box - နောက်ခံပုံသည် အကြောင်းအရာ၏ ဘယ်ဘက်အပေါ်ထောင့်မှ စတင်သည်။

အောက်ဖော်ပြပါ ဥပမာသည် background-originပိုင်ဆိုင်မှုကို ဖော်ပြသည်-

ဥပမာ

#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}

CSS နောက်ခံ-ကလစ် ပိုင်ဆိုင်မှု

CSS background-clipပိုင်ဆိုင်မှုသည် နောက်ခံ၏ ပန်းချီဧရိယာကို သတ်မှတ်ပေးသည်။

ပစ္စည်းသည် မတူညီသော တန်ဖိုးသုံးခုကို ယူသည်-

border-box - (မူလ) နောက်ခံကို နယ်စပ်၏ အပြင်ဘက်အစွန်းတွင် ခြယ်ထားသည်။
padding-box - နောက်ခံကို padding ၏အပြင်ဘက်အစွန်းအထိခြယ်သသည်။
content-box - အကြောင်းအရာဘောက်စ်အတွင်း နောက်ခံကို ခြယ်သထားသည်။

အောက်ဖော်ပြပါ ဥပမာသည် background-clipပိုင်ဆိုင်မှုကို ဖော်ပြသည်-

ဥပမာ

#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

CSS အဆင့်မြင့် နောက်ခံ ဂုဏ်သတ္တိများ

Property	Description
background	A shorthand property for setting all the background properties in one declaration
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)

❮ ယခင် နောက်တစ်ခု ❯

CSS ကျူတိုရီရယ်

CSS အဆင့်မြင့်

CSS တုံ့ပြန်မှု

CSS Grid

CSS SASS

CSS နမူနာများ

CSS ကိုးကားချက်များ

CSS နောက်ခံများစွာ