တစ်ဦးက Web Page ကိုကွက်တိတစ်ခုနောက်ခံပုံရိပ်ဆန့်ဖို့ကိုဘယ်လို

နောက်ခံဂရပ်ဖစ်နှင့်သင်၏ website ကိုအမြင်အာရုံအကျိုးစီးပွား Give

ပုံရိပ်တွေဆွဲဆောင်မှုက်ဘ်ဆိုက်ဒီဇိုင်း၏အရေးပါသောအစိတ်အပိုင်းတစ်ခုဖြစ်ပါသည်။ ဒါကနောက်ခံပုံရိပ်တွေ၏အသုံးပြုမှုပါဝင်သည်။ ဤအကြောင်းအရာစာမျက်နှာများ၏အစိတ်အပိုင်းတစ်ရပ်အဖြစ်တင်ပြကြသည်ပုံရိပ်တွေဆန့်ကျင်အဖြစ်စာမျက်နှာဒေသများနောက်ကွယ်မှအသုံးပြုကြသည်သောပုံများနှင့်ဂရပ်ဖစ်ဖြစ်ကြသည်။ ဤရွေ့ကားနောက်ခံပုံရိပ်တွေစာမျက်နှာမှအမြင်အာရုံအတိုး add နှင့်သင်စာမျက်နှာပေါ်တွင်ရှာနေစေခြင်းငှါ၎င်းအမြင်အာရုံဒီဇိုင်းအောင်မြင်ရန်ကူညီပေးနိုင်ပါသည်။

သငျသညျနောက်ခံပုံရိပ်တွေနဲ့အလုပ်လုပ်စတင်လျှင်, သင်ကြမည်မှာသေချာသင်စာမျက်နှာ fit မှဆန့်မှပုံရိပ်တစ်ခုလိုခငျြရှိရာမြင်ကွင်းသို့ပြေးပါလိမ့်မယ်။

ဤသည်မှာဖြစ်ကြောင်းတုံ့ပြန်မှု websites များအတွက်အထူးသဖြင့်မှန် devices များနှင့်မျက်နှာပြင်အရွယ်အစား၏ကျယ်ပြန့မှကယ်နှုတ်ခံရ ။

မရတိုင်း image ကို website တစ်ခု၏အာကာသအတွင်းကိုက်ညီကြောင့်နောက်ခံပုံဆန့်ဖို့ဒီအလိုဆန္ဒကို web ဒီဇိုင်နာများအတွက်အလွန်ဘုံအလိုရှိ၏။ အဲဒီအစားသတ်မှတ်ထားတဲ့အရွယ်အစား setting ၏, image ကိုဆန့်ကဘယ်လောက်ပဲကျယ်ပြန့်စာမျက်နှာ fit သို့မဟုတ်ကျဉ်းမြောင်းမှကွေးဖို့ခွင့်ပြု browser ကိုပြတင်းပေါက် ဖြစ်ပါတယ်။

စာမျက်နှာ၏နောက်ခံ fit မှပုံရိပ်တစ်ခုဆန့်ဖို့အကောင်းဆုံးနည်းလမ်းကိုအသုံးဖို့ဖြစ်ပါတယ် CSS3 နောက်ခံ-အရွယ်အစားအဘို့, ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု။ ဒီနေရာမှာတစ်ဦးစာမျက်နှာ၏ခန္ဓာကိုယ်များအတွက်နောက်ခံပုံကိုအသုံးပြုသည်နှင့်အစဉ်အမြဲမျက်နှာပြင် fit မှဆန့်ပါလိမ့်မယ်ဒါကြောင့် 100% မှအရွယ်အစားသတ်မှတ်သောအရာဥပမာတစ်ခုဖြစ်ပါတယ်။

ခန္ဓာကိုယ် {
နောက်ခံ: url (bgimage.jpg) မထပ်;
နောက်ခံ-size: 100%;
}

caniuse.com အဆိုအရယင်းပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု IE ကို 9+, Firefox ကို 4+, အော်ပရာ 10.5+, Safari 5+, Chrome ကို 10.5+ ၌၎င်း, အားလုံးအဓိကမိုဘိုင်း browser များပေါ်အလုပ်လုပ်ပါတယ်။ ဒီအကသင်ကတစ်စုံတစ်ယောက်ရဲ့ screen ပေါ်မှာအလုပ်လုပ်မည်မဟုတ်ကြောင်းကြောက်ရွံ့ခြင်းမရှိဘဲဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုအသုံးပြုသင့်ပါတယ်ဆိုလိုတာကဒီနေ့မရရှိနိုင်သမျှသောခေတ်သစ် browser များအဘို့အဖုံးလွှမ်း။

အသက်ကြီး browser မှာတစ်ဆန့်နောက်ခံသမိုင်းကိုအတု

ဒါဟာသင်တွေကို IE9 ထက်အသက်ကြီးမဆို browser များပံ့ပိုးပေးရန်လိုအပ်ပေမယ့်ရဲ့သငျသညျ IE8 ကဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုထောကျပံ့မသင့်သောစိုးရိမ်ပူပန်နေယူဆကြကုန်အံ့မယ်လို့အလွန်အလားအလာမရှိပါ။ ကြောင်းဥပမာအားဖြင့်, သင်နေတဲ့ဆန့်နောက်ခံအတုနိုင်ပါတယ်။ သင်သုံးနိုငျ browser ကိုရှေ့ဆက် Firefox ကို 3.6 (-moz-နောက်ခံ-size) နဲ့ Opera 10.0 (-O-နောက်ခံ-size) သည်။

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

အိုင်ဒီ = "BG" />

1. ပထမဦးစွာ browser အားလုံးတစ်ဦးကို 100% အမြင့်, 0 မာဂျင်, နှင့်နဲ့ HTML BODY ဒြပ်စင်အပေါ် 0 င် padding ကိုရှိသည်သေချာပါစေ။ သင့်ရဲ့ HTML document ရဲ့ဦးခေါင်းအတွင်းအောက်ပါအချက်များကို Place:

2. သင်ဝဘ်စာမျက်နှာ၏ပထမဦးဆုံးဒြပ်စင်အဖြစ်နောက်ခံဖြစ်ချင်သောပုံရိပ် Add နှင့်ကပေး အိုင်ဒီ "BG" ၏:

3. ရာထူးအတွက် နောက်ခံပုံ ကထိပ်မှာ fixed နှင့် left နှင့် 100% ကျယ်ပြန့်သည်နှင့်အမြင့် 100% ကြောင်းဒါ။ သင့်ရဲ့စတိုင်စာရွက်ဤ Add:

   img # BG {
   အနေအထား: fixed;
   ထိပ်တန်း: 0;
   left: 0;
   width: 100%;
   အမြင့်: 100%;
   }

4. "အကြောင်းအရာ" ၏တစ်ဦးအိုင်ဒီနဲ့ div element ရဲ့အတွင်းပိုင်းစာမျက်နှာအားလုံးကိုသင့်ရဲ့ content တွေကိုထည့်ပါ။ image ကိုအောက်က div Add:

   ဤနေရာတွင်အားလုံးသင့်ရဲ့ content တွေကို - စသည်တို့ကိုခေါင်းစီးများ, အပိုဒ်အပါအဝင်

   မှတ်ချက်: ယခုသင့်စာမျက်နှာကိုကြည့်ဖို့စိတ်ဝင်စားစရာကောင်းပါတယ်။ အဆိုပါပုံရိပ်ဆနျ့ဖော်ပြပေးပါလိမ့်မယ်, ဒါပေမယ့်သင့်ရဲ့ content တွေကိုလုံးဝပျောက်ဆုံးနေသည်။ အဘယ်ကြောင့်? အများဆုံး browser များကပြသမည်မဟုတ် - နောက်ခံပုံရိပ်အမြင့်အတွက် 100% ဖြစ်တယ်, အကြောင်းအရာဌာနခွဲစာရွက်စာတမ်းများ၏စီးဆင်းမှုအတွက် image ကိုအပြီးဖြစ်ပါတယ်လို့ပဲ။
   
5. ရာထူးသင့်ရဲ့အကြောင်းအရာကဆွေမျိုးနှင့်ထားပြီးသို့မှသာ z-index ကို 1. ဒီ၏စံချိန်စံညွှန်းများ-compliant browser များအတွက်နောက်ခံပုံအထက်တွင်ကြောင့်ဆောင်ခဲ့ဦးမည်။ သင့်ရဲ့စတိုင်စာရွက်ဤ Add:

   #content {
   အနေအထား: ဆွေမျိုး;
   z-index ကို: 1;
   }

1. သို့သော်သင်သည်ပြုတော်မပါတယ်။ က Internet Explorer 6 စံချိန်စံညွှန်းကိုက်ညီမဟုတ်ပါဘူးနှင့်နေဆဲအချို့သောပြဿနာများရှိနေသည်။ အဲဒီမှာရှိသမျှဘရောက်ဇာကနေ CSS ကိုဒါပေမယ့် IE6 ဖုံးကွယ်ဖို့နည်းလမ်းများစွာရှိပါတယ်, ဒါပေမယ့်အလွယ်ဆုံး (နှင့်အခြားပြဿနာများကိုဖြစ်ပေါ်စေရန်အနည်းဆုံးဖွယ်ရှိ) ခြွင်းချက်မှတ်ချက်များကိုသုံးပါရန်ဖြစ်ပါသည်။ သင့်ရဲ့စာရွက်စာတမ်း၏ဦးခေါင်း၌သင်တို့၏ကိုနှိပ်ပြီးပြီးနောက်အောက်ပါထားပါ:

2. အဆိုပါ Highlighted မှတ်ချက်အတွင်းပိုင်း, IE ကို 6 ကောင်းတဲ့ကစားရအချို့သောစတိုင်များနှင့်အတူအခြား style sheet add:

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

OK ကို - ဤဝန်ခံရမည်နည်းလမ်း overkill ဖြစ်ပါတယ်။ အလွန်နည်းပါးက်ဘ်ဆိုက်များ, တော့ဘူးအများကြီးလျော့နည်း IE6 IE ကို 7 သို့မဟုတ် 8 support ရန်လိုအပ်ပါတယ်

ကဲ့သို့သော, ဒီချဉ်းကပ်မှုခေတ်နောက်ကျခြင်းနှင့်သင်တို့အဘို့ဖွယ်ရှိမလိုအပ်သောဖြစ်ပါတယ်။ ငါသည်ခပ်သိမ်းသောကျွန်တော်တို့ရဲ့ browser များအတူတကွဒါကြင်ကစားမတိုင်မီအမှုအရာခဲ့ကြသည်မည်မျှ ပို. ခက်ခဲအဖြစ်သိချင်စိတ်တစ်ခုမော်ဒယ်အဖြစ်ကဒီမှာထက်ပိုပါကစွန့်ခွာ!

တစ်ဦးသေး Space ကိုကျော်တစ်ဦးဆန့်နောက်ခံပုံရိပ်ကိုအတု

သငျသညျအတုတစ်ခု div ဖြတ်ပြီးတစ်ဦးဆန့်နောက်ခံပုံသို့မဟုတ်သင်၏ဝဘ်စာမျက်နှာပေါ်တွင်အခြားဒြပ်စင်တစ်ခုအလားတူ technique ကိုသုံးနိုင်သည်။ သငျသညျအကြွင်းမဲ့အာဏာ positioning ကိုသုံးဖို့သို့မဟုတ်သင့်စာမျက်နှာ၏အခြားအစိတ်အပိုင်းများအဘို့အထူးဆန်းအကွာကိစ္စများရှိသည်ဖြစ်စေရှိသည်အဖြစ်ဒါကနည်းနည်း trickier ဖြစ်ပါတယ်။

1. ငါနောက်ခံအဖြစ်အသုံးပြုချင်သောစာမျက်နှာပေါ်တွင်ပုံရိပ်ချထားပါ။

2. စတိုင်စာရွက်ထဲမှာ, ပုံရိပ်တစ်ခု width နဲ့ height ထားကြ၏။ သငျသညျအကျယ်သို့မဟုတ်အမြင့်အဘို့ရာခိုင်နှုန်းကိုသုံးနိုင်သည်, မှတ်ချက်, ဒါပေမယ့်ကိုယ်ကပိုမိုလွယ်ကူအမြင့်အဘို့အလျားတန်ဖိုးများနှင့်အတူကိုထိန်းညှိဖို့ရှာပါ။

   img # BG {
   အကျယ်: 20em;
   အမြင့်: 30em;
   }

3. ကျနော်တို့အထက်ပြုသကဲ့သို့ထိုအိုင်ဒီ "အကြောင်းအရာ" နဲ့တစ်ဦး div ၌သင်တို့၏အကြောင်းအရာ Place:

   ဤနေရာတွင်အားလုံးသင့်ရဲ့ content တွေကို

4. နောက်ခံပုံရိပ်အဖြစ်အတူတူပင် width နဲ့ height ဖြစ်အကြောင်းအရာ div style:

   div # အကြောင်းအရာ {
   အကျယ်: 20em;
   အမြင့်: 30em;
   }

5. ထိုအခါပုံရိပ်ကဲ့သို့တူညီသောအမြင့်မှအကြောင်းအရာတက်နေရာချ။ ဒါကြောင့်သင့်ရဲ့ image ကိုသငျသညျထိပ်ဆုံးတစ်ဦးစတိုင်ရှိသည်မယ်လို့ 30em လျှင်: -30em; အကြောင်းအရာအပေါ် 1 z-index ထားရန်မေ့လျော့မနေပါနဲ့။

   #content {
   အနေအထား: ဆွေမျိုး;
   ထိပ်တန်း: -30em;
   z-index ကို: 1;
   အကျယ်: 20em;
   အမြင့်: 30em;
   }

6. သငျသညျအထကျပွုသကဲ့သို့ထို့နောက် IE ကို 6 အသုံးပြုသူများအတွက် -1 ၏ z-index အတွက် add:

တစျဖနျ, နောက်ခံ-size ကိုယခုမကျယ်ပြန့် browser ကိုထောက်ခံမှုခံစားအတူ, ဒီချဉ်းကပ်မှုကိုလည်းအလွန်ဖြစ်နိုင်ဖွယ်မလိုအပ်သောသည်နှင့်တစ်ဦး bygone ခေတ်တစ် product အဖြစ်ပေးအပ်သည်။ သင်ဤချဉ်းကပ်မှုပုံစံအသုံးပြုချင်ခဲ့တယျဆိုရငျ, ရုံသင်သည်တတ်နိုင်သကဲ့သို့အများအပြား browser များအတွက်ဒီစမ်းသပ်ဖို့သေချာပါစေ။

သင့်ရဲ့ content တွေကိုအရွယ်အစားပြောင်းလဲလျှင်, သင်မဟုတ်ရင်, သင်ထူးဆန်းရလဒ်များကိုအတူတက်အဆုံးသတ်ပါလိမ့်မယ်, သင်၏ကွန်တိန်နာ၏အရွယ်အစားနှင့်နောက်ခံပုံရိပ်ကိုပြောင်းလဲသွားဖို့လိုအပ်ပါလိမ့်မယ်။