CSS-dan foydalanib javobli dizayn tasvirlarini qanday qo'shish kerak
Bugungi kunda ommabop veb-saytlarga qarang va siz ko'rib turganingizdek, bir dizaynlashtirilgan katta, keng ekranli fon tasvirlari. Ushbu tasvirlarni qo'shish bilan bog'liq qiyinchiliklardan biri veb-saytlar turli xil ekran o'lchamlari va qurilmalariga javob berishi kerak bo'lgan eng yaxshi amaliyotdan kelib chiqadi - sezgir veb-dizayn sifatida ma'lum bo'lgan yondashuv.
Sizning veb-saytingizning tartibi o'zgaradi va turli ekran o'lchamlari bilan farqlanadi, shu sababli ham ushbu fon tasvirlari ularning o'lchamlarini mos ravishda o'zgartirishi kerak.
Aslida, bu "suyuqlikli tasvirlar" sezgir veb-saytlarning asosiy qismlaridan biri (suyuqlik tarmoqlari va ommaviy axborot so'rovlari bilan birga). Ushbu uchta qism avval boshidan buyon sezgir veb-dizaynga asos bo'lib xizmat qilgan, ammo har doim saytga javob beruvchi inline rasmlarni qo'shish juda oson bo'lgan (inline tasvirlar HTML formatlashning bir qismi sifatida kodlangan grafikalar). fon tasvirlari bilan bir xil (CSS-ning fon xususiyatlari yordamida sahifaga joylashtirilgan) ko'plab veb-dizaynerlar va oldingi ishlab chiquvchilar uchun katta muammo tug'dirdi. Yaxshiyamki, CSS-da "background-size" xususiyatining qo'shilishi bu imkoniyatni yaratdi.
Ayrim maqolada men tasvirlarni derazaga moslash uchun CSS3 xususiyat fon-o'lchamidan qanday foydalanishni o'rgandim , ammo bu xususiyat uchun kengroq foydali va foydali usul bor. Buni amalga oshirish uchun quyidagi funktsiya va qiymat kombinatsiyasidan foydalanamiz:
fon-o'lchovi: qopqoq;
Muqova kalit so'z xususiyati brauzer oynani qanchalik katta yoki kichkina bo'lishidan qat'i nazar, oynaga moslash uchun tasvirni o'lchashni bildiradi. Rasm butun ekranni qoplash uchun miqyosi bilan cheklanadi, lekin asl nisbatlar va asl nisbati saqlanib qoladi, vahiyning o'zini buzishining oldini oladi.
Rasm oynaning butun yuzasi yopilgan bo'lishi uchun imkon qadar katta oynaga joylashtiriladi. Bu sizning sahifangizda bo'sh joylar yoki rasmdagi buzilishlarning bo'lmasligi demakdir, lekin bu shuningdek, ekranning eng ko'p nisbati va ushbu tasvirga bog'liq ravishda, tasvirning bir qismini kesish mumkin degan ma'noni anglatadi. Masalan, rasmning orqa tomonlari (yuqorida, pastda, chapda yoki o'ngda) fon-pozitsiya xususiyati uchun foydalanadigan qiymatlarga qarab rasmlarni kesilishi mumkin. Agar fonni "chapga" yo'naltirsangiz, tasvirdagi ortiqcha qiymat pastki va o'ng tomondan o'chib turadi. Agar fon tasvirini markazlashtiradigan bo'lsangiz, ortiqcha chegara barcha taraflardan o'chib ketadi, lekin bu ortiqcha tarqalib ketganligi uchun, har qanday tomonga ta'siri kamroq xizmat qiladi.
Fon-o'lchovdan qanday foydalaniladi: qopqoq;
O'zingizning fon rasmingizni yaratishda juda katta rasmni yaratish yaxshi bo'ladi. Brauzer ingl. Sifatga sezilarli ta'sir ko'rsatmasdan, tasvirni kichikroq qilib qo'yishi mumkin, bunda brauzer asl o'lchamidan kattaroq o'lchamdagi hajmga ega bo'lganda, ingl. Sifat sifati pasayib, loyqa va pixelated bo'ladi. Buning salbiy tomoni shundaki, siz barcha ekranlarga yirik tasvirlarni etkazayotganingizda sizning sahifangiz ishlash hitsini oladi.
Buni qilganingizda, ushbu rasmlarni yuklash tezligi va veb-taslim qilish uchun to'g'ri tayyorlang . Oxir-oqibat, baxtli muhiti etarli darajada rasm hajmi va sifati va yuklab olish tezligi uchun o'rtacha fayl hajmi orasida topishingiz kerak.
O'lchamli fon tasvirlarini ishlatishning keng tarqalgan usullaridan biri bu tasvirning sahifaning to'liq fonini olishini xohlaysizmi, bu sahifaning kengligi va ish stoli kompyuterda ko'rinsinmi yoki juda kichikmi va ko'chma, mobil qurilmaga qurilmalar.
Tasviringizni veb-hostingizga o'rnating va CSS-ga fon tasvirini qo'shing:
background-image: url (fişek-over-wdw.jpg);
fon-takrorlash: no-repeat;
fon-pozitsiya: markaz markazi;
fon-ilovasi: qattiq;
Avval brauzerni avvalgi CSS-ga qo'shing:
-webkit-background-size: qopqoq;
-moz-fon-o'lchami: qopqoq;
-o-fon-o'lchami: qopqoq;
Keyin CSS xususiyatini qo'shing:
fon-o'lchovi: qopqoq;
Har xil qurilmalar uchun turli xil tasvirlardan foydalanish
Ish stoliga yoki noutbukga nisbatan sezgir dizayn muhim ahamiyatga ega bo'lsa-da, veb-ga ulangan qurilmalarning xilma-xilligi sezilarli darajada o'sdi va ekranning kattaligi ko'pligi bilan birga keladi.
Yuqorida aytib o'tilganidek, smartfonda juda katta sezgir fon tasvirini yuklash, masalan, samarali yoki tarmoqli kengligi uchun mo'ljallangan dizayn emas.
Ko'rsatiladigan qurilmalarga mos keladigan rasmlarni taqdim qilish uchun ommaviy axborot so'rovlarini qanday ishlatishni bilib oling va veb-saytingizning uyali qurilmalar bilan muvofiqligini yaxshilang.
Jennifer Kryninning original maqolasi. Jeremy Girard 9/12/17 tomonidan tahrirlangan