တစ်ဦးဝက်ဘ်ဆိုက်မှတုံ့ပြန်မှုနောက်ခံပုံများထည့်သွင်းနည်း

ဤတွင် CSS ကိုသုံးပြီးတုံ့ပြန်မှုဒီဇိုင်းပုံရိပ်တွေကိုထည့်သွင်းဖို့ဘယ်လိုဖွင့်

ယနေ့လူကြိုက်များတဲ့က်ဘ်ဆိုက်များကိုကြည့်ရှုခြင်းနှင့်သင်မြင်ဖို့သေချာဖြစ်ကြောင်းဦးတည်းဒီဇိုင်းကုသမှုကြီးမားတဲ့ screen ကို-spanning နောက်ခံပုံရိပ်တွေဖြစ်ပါတယ်။ အဖြစ်လူသိများတစ်ခုချဉ်းကပ်မှု - ဤရုပ်ပုံများကိုထည့်သွင်းနှင့်အတူစိန်ခေါ်မှုများတစ်ခုမှာဝက်ဘ်ဆိုက်များကွဲပြားခြားနားသောမျက်နှာပြင်အရွယ်အစားနှင့်စက်ကိရိယာများတုံ့ပြန်ရမည်ကိုကိုအကောင်းဆုံးအလေ့အကျင့်ကနေကြွလာ တုံ့ပြန်မှုကို web design ကို ။

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

တကယ်တော့ဤ "အရည်ပုံရိပ်တွေ" (တစ်အရည်ဇယားကွက်နှင့်မီဒီယာမေးမြန်းချက်တွေနဲ့အတူ) တုံ့ပြန်မှုဝက်ဘ်ဆိုက်များ၏သော့ကိုအပိုင်းပိုင်း၏တဝတည်းဖြစ်ကြ၏။ ထိုသုံးအပိုင်းပိုင်းအစအဦးကတည်းကတုံ့ပြန်မှုကို web ဒီဇိုင်းတစ်ခုအဓိကပါပြီ, ဒါပေမယ့်အမြဲတမ်းလုပ်နေတာ, (inline ပုံရိပ်တွေက HTML markup ၏တစ်စိတ်တစ်ပိုင်းအဖြစ် coded သောဂရပ်ဖစ်များမှာ) တစ်ဦး site ကိုမှတုံ့ပြန်မှု inline ပုံရိပ်တွေကိုထည့်သွင်းဖို့မျှမျှတတလွယ်ကူသောခဲ့စဉ် (CSS ကိုနောက်ခံဂုဏ်သတ္တိများကို အသုံးပြု. စာမျက်နှာသို့ style အမျိုးမျိုးထားတဲ့) နောက်ခံပုံရိပ်တွေနှင့်အတူတူညီတာရှည်အများအပြားရှိသော web designer များနှင့်ရှေ့ဆုံးကို developer များသိသိသာသာစိန်ခေါ်မှုထောက်ပံ့ပေးလျက်ရှိသည်။ ကျေးဇူးတင်စရာ, CSS ကိုရှိ "background-size" property က၏များအပြင်ဒီဖြစ်နိုင်သောဖန်ဆင်းတော်မူပြီ။

သီးခြားဆောင်းပါး၌ငါဖုံးလွှမ်း သည့် CSS3 property ကိုနောက်ခံ-size ကိုဘယ်လိုအသုံးပြုမလဲ ပြတင်းပေါက်အတွက် fit မှပုံရိပ်များဆန့်ရန်, ဒါပေမဲ့ဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုများအတွက်လုပ်ငန်းတွေစတင်ဖို့တစ်ခုပင်ပိုကောင်း, ပိုအသုံးဝင်သောနည်းလမ်းတစ်ခုရှိပါတယ်။ ဒီလိုလုပ်ဖို့, ငါတို့အောက်ပါပိုင်ဆိုင်မှုနှင့်တန်ဖိုးပေါင်းစပ်သုံးပါလိမ့်မယ်:

နောက်ခံ-size: အဖုံး;

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

တစ်ခုလုံးကို window ကိုမျက်နှာပြင်ဖုံးလွှမ်းနိုင်အောင် image ကိုတတ်နိုင်သမျှကြီးမားသောပြတင်းပေါက်၌နေရာချနေပါတယ်။ ဤသည်ကိုသင်ပုံရိပ်အပေါ်သင့်စာမျက်နှာသို့မဟုတ်မည်သည့်ပုံပျက်အတွက်မဆိုအလွတ်အစက်အပြောက်ရှိသည်မဟုတ်မည်ဟုဆိုလိုသည်, ဒါပေမယ့်လည်းပုံရိပ်အချို့ကိုမျက်နှာပြင်ရဲ့အချိုးနဲ့ဆိုတဲ့မေးခွန်းကိုအတွက်ပုံရိပ်ပေါ် မူတည်. ချွတ်မြားကိုပွငျဆငျစခွေငျးငှါဆိုလိုသည်။ ဥပမာအားဖြင့်, ပုံရိပ်တစ်ခု (ထိပ်, အောက်ခြေ, left, ဒါမှမဟုတ်ညာဘက်ဖြစ်စေ) ၏အနားပေးသောသင်နောက်ခံ-အနေအထားပိုင်ဆိုင်မှုအသုံးပြုတန်ဖိုးထားပေါ် မူတည်. အဆိုပါပုံရိပ်တွေအပေါ်ပယ်ရှင်းခြင်းကိုခံရလိမ့်မည်။ သင် "ဘယ်ဘက်ထိပ်" ကိုနောက်ခံ Oriental လျှင်, ပုံရိပ်ပေါ်မဆိုပိုလျှံအောက်ခြေနှင့်ညာဘက်နှစ်ဖက်ကိုပိတ်ထားကြလိမ့်မည်။ သင်နောက်ခံပုံဗဟိုလျှင်, ပိုလျှံအားလုံးနှစ်ဖက်စလုံး၏ချွတ်ရောက်လိမ့်မည်, သို့သော်ပိုလျှံထွက်ပြန့်နှံ့နေသည်ကတည်းကတစုံတယောက်သောသူသည်အခြမ်းအပေါ်သက်ရောက်မှုလျော့နည်းအစေခံဖြစ်လိမ့်မည်။

နောက်ခံ-size ကိုအသုံးပြုနည်းကိုဘယ်လို: အဖုံး;

သင့်ရဲ့နောက်ခံပုံရိပ်ဖန်တီးသောအခါ, ကမျှမျှတတကြီးမားသောကြောင်းကိုပုံတစ်ပုံကိုဖန်တီးရန်ကောင်းတစ်ဦးအယူအဆပါပဲ။ browser များအမြင်အာရုံအရည်အသွေးပေါ်တစ်ဦးသိသာသက်ရောက်မှုမရှိဘဲပုံတစ်ပုံကိုသေးငယ်စေနိုင်သည်နေစဉ် browser ကိုပြုလုပ်မူရင်းရှုထောင့်ဖွင့်ခြင်းထက်ပိုကြီးတဲ့တစ်အရွယ်အစားပုံတစ်ပုံကိုဖွင့် scales သည့်အခါ, ထိုအမြင်အရည်အသွေးကိုမှုန်ဝါးနှင့် pixels ဖြစ်လာ, ယုတျညံ့ကြလိမ့်မည်။ ဤအဆင်မပြေသင်တို့ရှိသမျှသည်ဖန်သားပြင်မှဧရာမရုပ်တုဆင်းတုပို့ဆောင်ကြသောအခါသင့်စာမျက်နှာတစ်စွမ်းဆောင်ရည်ကိုထိခိုက်ကြာသောကွောငျ့ဖွစျသညျ။

သငျသညျဤသို့ပြုသည့်အခါစနစ်တကျမှသေချာအောင် ဒေါင်းလုပ်အမြန်နှုန်းနှင့်ဝဘ်ပေးပို့ဘို့သူတို့အားပုံရိပ်တွေကိုပွငျဆငျ ။ အဆုံး၌, သင်ကကြီးမားတဲ့အလုံအလောက်ပုံရိပ်အရွယ်အစားနှင့်အရည်အသွေးနှင့် download speed ကတစ်ကျိုးကြောင်းဆီလျော်ဖိုင်အရွယ်အစားအကြားပျော်ရွှင်အလတ်စားရှာတွေ့ဖို့လိုအပ်ပါတယ်။

သင်သည်ထိုပုံရိပ်ကိုကြောင်းစာမျက်နှာကျယ်ပြန့်သည်နှင့်တစ်ဦးက desktop ကွန်ပျူတာသို့မဟုတ်အများကြီးသေးငယ်အပေါ်ကြည့်ရှုအားပေးလျက်ရှိကာလက်ကိုင်စလှေတျလျက်ရှိသည်ရှိမရှိ, စာမျက်နှာ၏အပြည့်အဝနောက်ခံတက်ယူချင်သည့်အခါချုံ့ချဲ့နောက်ခံပုံရိပ်တွေသုံးစွဲဖို့ဘုံနည်းလမ်းများတစ်ခုမှာ, မိုဘိုင်းဖြစ်ပါသည် devices များ။

သင်၏ဝဘ်အိမ်ရှင်ရန်သင့်ပုံရိပ်ကို Upload လုပ်ပါနှင့်တစ်ဦးနောက်ခံပုံအဖြစ်သင့် CSS ကိုက add:

နောက်ခံ-image: url (မီးရှူးမီးပန်းများ-over-wdw.jpg);
နောက်ခံ-ထပ်: မထပ်;
နောက်ခံ-အနေအထား: စင်တာစင်တာ;
နောက်ခံ-attachment ကို: fixed;

ပထမဦးဆုံး CSS ကို prefixed browser ကို Add:

-webkit-နောက်ခံ-size: အဖုံး;
-moz-နောက်ခံ-size: အဖုံး;
-O-နောက်ခံ-size: အဖုံး;

ထိုအခါ CSS ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုထည့်သွင်း:

နောက်ခံ-size: အဖုံး;

ကွဲပြားသည့်ကိရိယာများ suite ဒါကအမျိုးမျိုး Images ကိုအသုံးပြုခြင်း

တစ်ဦး desktop သို့မဟုတ် Laptop ကွန်ပျူတာအတွေ့အကြုံအတွက်တုံ့ပြန်မှုဒီဇိုင်းအရေးကြီးပါတယ်နေစဉ်, Web ကိုရယူနိုငျကွောငျးထုတ်ကုန်များ၏အမျိုးမျိုးသိသိသာသာလာခဲ့သည်နှင့်မျက်နှာပြင်အရွယ်အစား၏ကြီးမြတ်သောအမျိုးမျိုးကြောင့်နှင့်တကွကြွလာ။

ယခင်ကဖော်ပြခဲ့သည့်အတိုင်း, တစ်ဦးစမတ်ဖုန်းပေါ်မှာအလွန်ကြီးမားတုံ့ပြန်မှုနောက်ခံပုံ loading, ဥပမာတစ်ခုထိရောက်သို့မဟုတ် bandwidth ကို-သတိဒီဇိုင်းမဟုတ်ပါဘူး။

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

Jennfier Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ ဂျယ်ရမီ Girard 9/12/17 တည်းဖြတ်