Veb-saytingizdan fon grafikalar bilan ingl. Qiziqish bering
Rasmlar veb-sayt dizaynlari uchun muhim ahamiyatga ega. Bunga fon tasvirini ishlatish kiradi. Ular tarkib sahifalarining bir qismi sifatida taqdim qilinadigan tasvirlardan farqli o'laroq, sahifadagi joylardagi rasm va grafikalar. Ushbu fon tasvirlar sahifaga ingl. Qiziqish qo'shishi va siz sahifada izlayotgan ingl. Dizaynga erishishingizga yordam beradi.
Agar siz fon tasvirlari bilan ishlay boshlasangiz, siz rasmni rasmga moslash uchun siz xohlagan stsenariyga o'tasiz.
Bu, ayniqsa , qurilmalar va ekranning keng kattaligiga yetkaziladigan javob beruvchi veb-saytlar uchun to'g'ri.
Veb-sayt dizaynerlari uchun orqa fonni suratga olish istagi - bu har qanday tasvir veb-saytga mos kelmaydi. Belgilangan hajmni o'rnatish o'rniga, tasvirni kengaytirish brauzer oynasining qanchalik kengligi yoki tor bo'lishidan qat'i nazar, sahifani moslash uchun moslashishga imkon beradi.
Sahifaning orqa foniga moslash uchun rasmni surishning eng yaxshi usuli - fon-o'lcham uchun CSS3 xususiyatidan foydalanish. Bu erda sahifa tanasi uchun fon tasvirini ishlatadigan va 100% hajmini belgilaydigan misol, u har doim ekranga moslash uchun cho'ziladi.
tanasi {
fon: url (bgimage.jpg) no-repeat;
fon-o'lchovi: 100%;
}
Caniuse.com saytiga ko'ra, ushbu mulk IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ va barcha yirik mobil brauzerlarda ishlaydi. Bu bugungi kunda mavjud bo'lgan barcha zamonaviy brauzerlar uchun sizni qamrab oladi, ya'ni bu xususiyatni kimning ekranida ishlamasligi qo'rqmasdan ishlatishingiz kerak.
Qadimgi brauzerlarda uzatilgan fonni ishlating
IE9dan kattaroq brauzerlarni qo'llab-quvvatlashingiz kerak emas, lekin IE8 ushbu xususiyatni qo'llab-quvvatlamasligingiz haqida o'ylaysiz. Bunday holda, siz uzaygan fonni soxtalashtirishingiz mumkin. Siz Firefox 3.6 (-moz-fon-o'lcham) va Opera 10.0 (-o-background-size) uchun brauzer prefikslaridan foydalanishingiz mumkin.
Uzatilgan fon tasvirini soxta qilishning eng oson usuli uni butun sahifaga uzaytirishdir. Keyinchalik siz bo'sh joyga ega bo'lmaysiz yoki matningiz taranglashgan maydonga to'g'ri kelishidan xavotir olmang. Buni qanday qilish kerak:
id = "bg" />
- Birinchidan, barcha brauzerlarda 100% balandlik, 0 chekka bo'sh joy va HTML body elementlariga 0 to'ldirishga ishonch hosil qiling. Quyidagi HTML hujjatning boshiga qo'ying:
- Veb-sahifaning birinchi elementi sifatida fon bo'lishni xohlagan tasvirni qo'shing va "bg" ning identifikatorini bering:
- Orqa fon rasmini yuqori va chap tomonga o'rnatib, balandligi 100% va balandligi 100% bo'lishi kerak. Buni uslublar jadvaliga qo'shing:
img # bg {
lavozim: qattiq;
tepada: 0;
chap: 0;
kengligi: 100%;
balandligi: 100%;
} - Barcha tarkibingizni "kontent" idiga ega bo'lgan DIV elementi ichidagi sahifaga qo'shing. Tasvirning pastki qismida DIV qo'shing:
Eslatma: sahifangizga endi qarash qiziq. Rasm uzatilgan bo'lishi kerak, ammo kontentingiz to'liq yo'qolgan. Nima uchun? Fon tasvirining balandligi 100% bo'lgani uchun va kontentni bo'linish hujjat oqimidagi tasvirdan so'ng - ko'pchilik brauzerlar uni ko'rsatmaydi.Sizning kontentingiz bu yerda - sarlavhalar, paragraflar va h.k.
- Kontentingizni nisbiy va z-indeksiga ega bo'lishi uchun joylashtiring. Bu standartni mos brauzerlarda fon tasviridan yuqori darajaga keltiradi. Buni uslublar jadvaliga qo'shing:
#content {
Lavozim: nisbiy;
z-indeksi: 1;
}
- Lekin siz qilolmaysiz. Internet Explorer 6 standartlarga mos kelmaydi va hali ham ba'zi muammolar mavjud. CSS-ni har bir brauzerdan, lekin IE6dan yashirishning ko'plab usullari mavjud, ammo eng oson (va boshqa muammolarga olib kelishi ehtimoldan yiroq) shartli izohlardan foydalanishdir. O'zingizning hujjatning boshida jihozlardan keyin quyidagi narsalarni qo'ying:
- Ajratilgan sharhning ichida, IE 6 ni yaxshi o'ynash uchun ba'zi uslublar bilan boshqa uslublar varaqlarini qo'shing:
- IE 7 va IE 8 da testdan o'tganingizga ishonch hosil qiling. Sizga ularni qo'llab-quvvatlash uchun sharhlarni o'zgartirishingiz kerak bo'ladi. Biroq, uni sinovdan o'tkazganimda ishladim.
OK - bu taniqli WAY overkill. Juda oz sonli saytlar endi IE 7 yoki 8 ni qo'llab-quvvatlashi kerak, bundan kam IE6!
Shunday qilib, bu yondashuv qadimgi va ehtimol siz uchun keraksizdir. Men bu yerda hamma bizning brauzerlarimiz bilan birga juda chiroyli tarzda o'ynashdan oldin qanchalik murakkab narsalar bo'lganligi haqida ko'proq qiziqish modelini qoldirdim!
Kichkina makondan uzatilgan fon tasvirini suratga olish
Veb-sahifangizda DIV yoki boshqa element orqali uzaygan fon tasvirini yasash uchun shunga o'xshash usulni qo'llashingiz mumkin. Bu sizning mutlaq joylashuvni ishlatishingiz yoki sahifangizning boshqa qismlari uchun g'alati intervalgacha muammolarga ega bo'lishingiz kerak, chunki bu biroz trickier.
- Rasmni fon sifatida ishlatmoqchi bo'lgan sahifaga joylashtiring.
- Uslub varag'i uchun tasvir uchun kenglik va balandlikni o'rnating. E'tibor bering, kenglik yoki balandlik uchun foizlarni ishlatishingiz mumkin, lekin men balandlikning uzunlik qiymatlari bilan moslashishni osonroq deb bilaman.
img # bg {
kengligi: 20em;
balandligi: 30em;
} - Yuqorida ta'kidlaganidek, kontentingizni "content" id bilan div ga joylashtiring:
Sizning kontentingiz bu erda
- Div bilan divni fon tasvirini bir xil kenglik va balandlikga aylantiring:
div # kontent {
kengligi: 20em;
balandligi: 30em;
} - Keyin kontentni tasvir bilan bir xil balandlikka joylashtiring. Shunday qilib, agar sizning rasmingiz 30em bo'lsa, sizda yuqori darajadagi uslub bo'lishi mumkin: -30em; Tarkibida 1-z-indeksini qo'yishni unutmang.
#content {
Lavozim: nisbiy;
yuqori: -30em;
z-indeksi: 1;
kengligi: 20em;
balandligi: 30em;
} - Keyin yuqoridagi kabi IE 6 foydalanuvchilari uchun z-indeksini -1 qo'shing:
Shunga qaramasdan, keng ko'lamli brauzerni qo'llab-quvvatlovchi fon-hajmi hozirgi kunda bu yondashuvni juda keraksiz va o'tmishda qolib ketgan mahsulot sifatida taqdim etadi. Agar ushbu yondashuvdan foydalanishni xohlasangiz, buni imkon qadar ko'plab brauzerda sinab ko'rishingiz kerak.
Agar sizning kontentingiz hajmi o'zgargan bo'lsa, sizning konteyneringiz va fon rasmingiz hajmini o'zgartiring, aks holda siz g'alati natijalarga erishasiz.