သင့်ပုံများ Style နှင့် Styles အတွက် Images ကိုသုံးပါ
လူအတော်များများကိုအသုံးပြုဖို့ CSS ကို ၎င်းဖောင့်, အရောင်, အရွယ်အစားနှင့်ပိုပြီးပြောင်းလဲနေတဲ့, စာသားကိုထိန်းညှိဖို့။ သို့သော်လူများစွာမကြာခဏမေ့လျော့သောတဦးတည်းအရာသင်ကဲ့သို့ကောင်းစွာပုံရိပ်တွေနှင့်အတူ CSS ကိုသုံးနိုငျသောကွောငျ့ဖွစျသညျ။
အဆိုပါပုံရိပ်အတွင်းသဘောပြောင်းခြင်း
CSS ကိုသင် image ကိုစာမကျြနှာပျေါမှာပြသပုံကိုထိန်းညှိဖို့ခွင့်ပြုပါတယ်။ ဤသည်တသမတ်တည်းသင့်ရဲ့စာမျက်နှာများကိုစောင့်ရှောက်ခြင်းအဘို့အကိုတကယ်အသုံးဝင်နိုင်ပါတယ်။ အားလုံးပုံရိပ်တွေအပေါ်စတိုင်များ setting အားဖြင့်, သင်သည်သင်၏ပုံရိပ်တွေများအတွက်စံကြည့်ဖန်တီးပါ။ သငျသညျလုပျနိုငျတဲ့အရာအချို့က:
- ရုပ်တုဆင်းတုများကိုလှည့်ပတ်နေတဲ့နယ်စပ်သို့မဟုတ်အကြမ်းဖျင်း Add
- နှင့်ဆက်စပ်ပုံရိပ်တွေပတ်လည်အရောင်နယ်စပ် Remove
- width ကိုနှင့် / သို့မဟုတ်ရုပ်ပုံများအမြင့်ချိန်ညှိ
- ရေစက်အရိပ် Add
- image ကိုလှည့်ပါ
- image ကိုကျော်တခုလုံးကိုရစ်ဝဲနေသည်အခါစတိုင်များကိုပြောင်း
သင့်ရဲ့ image ကိုတစ်ဦးနယ်စပ်ပေးခြင်းကိုစတင်နေရာကောင်းတခုဖြစ်ပါတယ်။ ဒါပေမယ့်သင်ရုံနယ်စပ်ထက်ပိုစဉ်းစားသင့်ပါတယ် - သင့်ပုံရိပ်ကို၏တစ်ခုလုံးကိုစွန်ကိုစဉ်းစားတွေနဲ့ margin တွေ, adjust padding ကို အဖြစ်ကောင်းစွာ။ ပါးလွှာသောအနက်ရောင်နယ်စပ်နှင့်အတူပုံတစ်ပုံကောင်းတဲ့ကြည့်ပေမယ့်နယ်စပ်နှင့်ပုံရိပ်အကြားအချို့ padding ကိုဖြည့်စွက်ပင်ပိုကောင်းကြည့်ရှုနိုင်ပါတယ်။
img {
နယ်စပ်: 1px အစိုင်အခဲအနက်ရောင်;
padding ကို: 5px;
}
ဒါဟာဖို့ကောင်းတစ်ဦးအယူအဆရဲ့ အမြဲ Non-အလှဆင်ပုံရိပ်တွေလင့်ထားသည် လာသောအခါဖြစ်နိုင်သမျှ။ သင်ပြုသည့်အခါဒါပေမယ့်အများဆုံး browser များ image ကိုလှည့်ပတ်နေတဲ့အရောင်နယ်စပ် add ဆိုတာသတိရပါ။ သင်နယ်စပ်ပြောင်းဖို့အထက်ပါကုဒ်ကိုသုံးပါရင်တောင်သင်ကဲ့သို့ကောင်းစွာ link ကိုနယ်စပ်ကိုဖယ်ရှားသို့မဟုတ်ပြောင်းလဲစေဘဲနေလျှင်, link ကိုပြုလုပ်ဖျက်ရေးသွားမည်။ ဒီလိုလုပ်ဖို့ကိုသင်နှင့်ဆက်စပ်ပုံရိပ်တွေန်းကျင်ကနယ်စပ်ကိုဖယ်ရှားသို့မဟုတ်ပြောင်းလဲစေမယ့် CSS ကိုကလေးကစည်းမျဉ်းကိုအသုံးပြုသင့်ပါတယ်:
img> တစ် {
နယ်စပ်: none;
}
သင်တို့သည်လည်းသင့်ရဲ့ပုံရိပ်တွေ၏အမြင့်နှင့်အကျယ်ကိုပြောင်းလဲသို့မဟုတ်သတ်မှတ်ထားဖို့ CSS ကိုသုံးနိုင်သည်။ ဒါဟာဘာဖြစ်လို့လဲဆိုတော့ download speed က၏ပုံရိပ်ကိုအရွယ်အစားကိုထိန်းညှိဖို့ browser ကိုသုံးစွဲဖို့အလွန်ကြီးစွာသောစိတ်ကူးမယ့်နေချိန်မှာသူတို့နေဆဲကောင်းသောကြည့်ရှုနိုင်အောင်, သူတို့အရွယ်အစားကိုချုံ့နေဆဲပုံရိပ်တွေမှာအများကြီးပိုကောင်းလာပြီနေကြသည်။ နှင့် CSS နဲ့သင်တစ်ဦးစံအကျယ်သို့မဟုတ်အမြင့်ဖြစ်သို့မဟုတ်ပင်ကွန်တိန်နာမှဆွေမျိုးဖြစ်ဖို့အတိုင်းအတာကိုသတ်မှတ်အားလုံးရန်သင့်ပုံရိပ်တွေကိုသတ်မှတ်နိုင်သည်။
အမြင့်ဖြစ်စေ, အကျယ် - အကောင်းဆုံးရလဒ်များအတွက်, သင်တစ်ဦးတည်းသာအတိုင်းအတာအရွယ်အစားပြောင်းလဲပြီးသင့်တယ်, သင်ပုံရိပ်တွေဆိုဒ်ပြောင်းရန်အခါ, သတိရပါ။ ဒါကပုံရိပ်က၎င်း၏အချိုးစောင့်ရှောက်ကြောင်း enusre ပါလိမ့်မယ်, ဒါကြောင့်ထူးဆန်းတဲ့မကြည့်ပါဘူး။ အော်တိုမှအခြားတန်ဖိုးကို Set သို့မဟုတ်တသမတ်တည်းယင်းအချိုးကိုစောင့်ရှောက်ရန် browser ကိုပြောပြရန်ကထွက်ထွက်သွားကြပါသည်။
img {
width: 50%;
အမြင့်: အော်တို;
}
CSS3 သစ်ကိုဂုဏ်သတ္တိများကန့်ကွက်-မထိုက်မတန်ခြင်းနှင့်အရာဝတ္ထု-အနေအထားနှင့်အတူဤပြဿနာကိုအဖြေတစ်ခုပေးထားပါတယ်။ ဤအဂုဏ်သတ္တိများနှင့်တကွသင်အတိအကျပုံရိပ်အမြင့်နှင့် width နဲ့ဘယ်လိုအချိုးကိုင်တွယ်ရပါမည်သတ်မှတ်နိုင်ပါလိမ့်မည်။ ဒါဟာသင့်ရဲ့ပုံရိပ်တွေကိုလှည့်ပတ်သက်ရောက်မှု letterboxing သို့မဟုတ်လိုအပ်သောအရွယ်အစား fit မှ image ကိုရရှိရန်ယခင်ကသီးနှံစိုက်ပျိုးဖန်တီးပေလိမ့်မည်။
အဆိုပါ CSS3 အရာဝတ္ထု-မထိုက်မတန်ခြင်းနှင့်အရာဝတ္ထု-အနေအထားဂုဏ်သတ္တိများကျယ်ပြန့်သေးထောက်ခံကြသည်မဟုတ်နေစဉ်, ကောင်းစွာသင်သည်သင်၏ပုံရိပ်တွေကိုပြုပြင်မွမ်းမံဖို့ကိုသုံးနိုင်သည်ကြောင်းအများဆုံးခေတ်သစ် browser များအတွက်ထောက်ခံနေကြသောအခြား CSS3 ဂုဏ်သတ္တိများရှိပါသည်။ တစ်စက်မှောင်မိုက်အရိပ်ကဲ့သို့အမှုအရာတို့ကို, အများဆုံးခေတ်သစ် browser များအတွက်အခုအချိန်မှာအားလုံးအလုပ်, လှည့် skew, သို့မဟုတ်သင့်ပုံရိပ်တွေကိုရွှေ့ဖို့ထောင့်နှင့်အသွင်ပြောင်းဝိုင်းပါတယ်။ သို့ဖြစ်လျှင်သင်သည်တခုလုံးကိုရစ်ဝဲအခါပုံရိပ်တွေကိုပြောင်းလဲစေ CSS ကိုအကူးအပြောင်းကိုသုံးပါ, ဒါမှမဟုတ်နှိပ်လိုက်, ဒါမှမဟုတ်ကိုယ့်အချိန်ကာလတစ်ခုအထိအပြီးနိုင်ပါတယ်။
နောကျခံအဖြစ် Images ကိုအသုံးပြုခြင်း
CSS ကိုသင့်ရဲ့ပုံရိပ်တွေနှင့်အတူဖန်စီနောက်ခံကိုဖန်တီးရန်လွယ်ကူစေသည်။
သငျသညျတစ်ခုလုံးကိုစာမျက်နှာသို့မဟုတ်ရုံသတ်သတ်မှတ်မှတ်ဒြပ်စင်မှနောက်ခံထည့်သွင်းနိုင်ပါတယ်။ ဒါဟာနောက်ခံ-image ကိုအိမ်ခြံမြေနှင့်အတူစာမျက်နှာပေါ်တွင်တစ်ဦးနောက်ခံပုံကိုဖန်တီးရန်လွယ်ကူ:
ခန္ဓာကိုယ် {
နောက်ခံ-image: url (background.jpg);
}
ကိုယ့်တဦးတည်းဒြပ်စင်အပေါ်နောက်ခံထားရန်စာမျက်နှာပေါ်တွင်တစ်ဦးသတ်သတ်မှတ်မှတ်ဒြပ်စင်မှခန္ဓာကိုယ် selector ပြောင်းလဲပါ။
ရေစာတစ်ခုနှင့်တူ - သငျပုံရိပ်တွေနှင့်အတူလုပျနိုငျနောက်ထပ်ပျော်စရာအရာစာမျက်နှာ၏ကျန်နှင့်အတူ scroll ပါဘူးတဲ့နောက်ခံပုံဖန်တီးဖြစ်ပါတယ်။ သင်ရုံစတိုင်နောက်ခံ-attachment ကိုအသုံးပွုရ: fixed; သင့်ရဲ့နောက်ခံပုံရိပ်နှင့်အတူ။ သင့်ရဲ့နောက်ခံအခြားရွေးချယ်စရာနောက်ခံ-ထပ် property သုံးပြီးရုံအလျားလိုက်သို့မဟုတ်ဒေါင်လိုက်သူတို့ကို tile ကိုအောင်ပါဝင်သည်။
နောက်ခံ-ထပ်ရေးရန်: ပြန်လုပ်-x; အဆိုပါအလျားလိုက်ပုံရိပ်နှင့်နောက်ခံ-ထပ် tile ကိုမှ: ပြန်လုပ်-y က; tile ကိုမှဒေါင်လိုက်။ တဖန်သင်တို့နောက်ခံ-အနေအထားပိုင်ဆိုင်မှုနှင့်သင်၏နောက်ခံပုံနေရာချလို့ရပါတယ်။
ထိုအ CSS3 အဖြစ်ကောင်းစွာသင့်ရဲ့နောက်ခံပိုစတိုင်များကထပ်ပြောသည်။ သငျသညျနိုင်ပါတယ် ဆိုအရွယ်အစားနောက်ခံ fit ရန်သင့်ပုံရိပ်တွေကိုဆန့် သို့မဟုတ် ပြတင်းပေါက်အရွယ်အစားနှင့်အတူစကေးဖို့နောက်ခံပုံကိုသတ်မှတ် ။ သင်ကအနေအထားကိုပြောင်းလဲပစ်ပြီးတော့နောက်ခံပုံရိပ် clip နိုင်ပါတယ်။ သို့သော် CSS3 ပတ်သက်. အကောင်းဆုံးအရာတစျခုသငျသညျယခု ပို. ပင်အနုစိတ်သက်ရောက်မှုကိုဖန်တီးရန်မျိုးစုံနောက်ခံပုံရိပ်တွေထပ်ထားနိုငျသောကွောငျ့ဖွစျသညျ။
HTML5 ကိုစတိုင် Images ကိုကူညီပေး
HTML5 ကိုအတွက်ပုံဒြပ်စင်စာရွက်စာတမ်းအတွင်းတစ်ဦးတည်းရပ်နိုင်မည်သည့်ရုပ်ပုံများကိုလှည့်ပတ်ထားရှိရပါမည်။ အဲဒါကိုစဉ်းစားရန်တလမ်းတည်းဖြင့် image ကိုတစ်ခုနောက်ဆက်တွဲပေါ်လာနိုင်လျှင်, ကပုံဒြပ်စင်အတွင်း၌ဖြစ်သင့်သည်။ သို့ဖြစ်လျှင်သင်သည်သင်၏အရုပ်ပုံများကိုမှစတိုင်များကိုထည့်သွင်းဖို့ပြုလုပ်ဒြပ်စင်များနှင့် FIGCAPTION ဒြပ်စင်ကိုသုံးနိုင်သည်။