Yorliq img - bo'sh, unda atributlar mavjud va uning yopilish yorlig'i yo'q.
Sahifadagi rasmni ko'rsatish uchun atributdan foydalaning src. Src manba degan ma'noni anglatadi. Src atributining qiymati bu uRL manzili rasmlar.
Yuqoridagi satr, rasm html faylining o'zi bilan bir xil katalogda (papkada) joylashganligini anglatadi, bu rasmga tegishli. Aytaylik, sizda papka bor htmlo'z ichiga oladi indeks.html yuqoridagi kod bilan va rasmning o'zi ism bilan rasm.jpg.
Bunday holda, siz ochganingizda indeks.html brauzerda siz ushbu rasmni ko'rasiz. Agar sizda uni boshqa joyda bo'lsa (yuqoridagi yoki pastdagi papkada), unda buning o'rniga siz oq maydonni yoki qizil xochli kichik rasmni ko'rasiz (rasmni yuklay olmadi).
Rasmlar har doim ham faylning o'zi kabi bitta katalogda (papkada) bo'lavermaydi, shuning uchun retseptlash yo'llari keyinchalik batafsilroq tavsiflanadi.
Img yorliqlari atributlari
Src-ga qo'shimcha ravishda, img yorlig'ida ko'rsatilgan rasmning hajmi, imzosi va boshqalar uchun javobgar bo'lgan boshqa atributlar mavjud. 
src - rasm manzili
kengligi - rasm kengligi
balandligi - rasm balandligi
sarlavha - imo-ishora, rasm ustida aylantirilganda
alt - muqobil matn. Izlash robotlari va rasmlarni indekslash uchun kerak
chegara - tasvir chegarasining qalinligi. 0 - chegara yo'q, 1 - eng ingichka chegara va boshqalar.
Qo'shilgan rasmning manzili (misollar)
Qoida sifatida, rasmlar o'zi kabi papkada saqlanmaydi html fayli. Buning uchun bitta katalogda papka yaratiladi rasmlar (yoki img, bu ta'mga va rangga bog'liq). Va unda barcha kerakli rasmlar allaqachon joylashtirilgan. Alohida saqlash holatida, src atributi uchun boshqa manzilni belgilash kerak bo'ladi 
Agar fayl yuqoridagi papkada joylashgan bo'lsa, unda
Siz shuningdek rasmingizni boshqa saytdan, o'z jildingizga yuklamasdan turib, qo'shishingiz mumkin. Buni amalga oshirish uchun siz Internetga barqaror ulanishga ega bo'lishingiz kerak va taxminan quyidagi kodni kiritishingiz kerak, unda siz Internetdagi rasmga manzilni manzilga kiritasiz.
HTML fon rasmlari
Sifatda orqa rasm kengaytmali fayllar paydo bo'lishi mumkin gif, jpg, jpeg va png. Agar tasvir hajmi brauzer oynasidan kichikroq bo'lsa, u qolgan fonni avtomatik ravishda to'ldiradi. Ichida tanasi atributdan foydalanish fonunda biz tasvirga yo'lni belgilaymiz12/27/14 55.8K
Har qanday xona qimmat Fors gilam bilan qoplangan bo'lsa, yanada yaxshi ko'rinadi. Sizning saytingiz yomonligi nima? Ehtimol, qo'lda yasalgan qimmatbaho qasr bilan uning qavatini "yashirish" vaqti keldi. Saytni qanday yaratishni batafsil ko'rib chiqamiz:
Sayt uchun asosiy ma'lumotlar
Eskirgan sayt dizayni allaqachon zerikarli bo'lib chiqadi. Va men yangi va mazali narsa xohlayman. Va agar siz uni o'zingiz pishirsangiz, yangi dizayn shunday bo'ladi.
Ammo resursning butun dizaynini butunlay o'zgartirish o'zingiz uchun noshukurlikdir. Va hamma ham bu biznesda qo'llarini keskinlashtirmaydi. Shuning uchun, resursning fon rangini yoki uning fon rasmini o'zgartirib, eski shablonni yangilash oson.
Saytda fonni o'zgartirishning bir necha yo'li mavjud. Buning uchun CSS yoki html imkoniyatlaridan foydalaning. Ammo fon bilan ishlash uchun ko'plab xususiyatlar ushbu veb-texnologiyalarda bir xil nom va dastur metodologiyasiga ega.
Html fon asoslari
Fon sifatida bir nechta elementlardan foydalanishingiz mumkin:
- Rangi;
- Fon rasmi;
- Teksturadagi rasm.
Biz ularning har biri bilan batafsilroq muhokama qilamiz.
Sayt uchun fon rangini sozlash uchun stil atributi uslubining fon-rang xususiyatidan foydalaniladi. Ya'ni veb-sahifaning asosiy rangini o'rnatish uchun uni teg ichida ro'yxatdan o'tkazish kerak
. Masalan:Veb-sayt haqida ma'lumot # 55D52B
Oltinchi raqamli rang kodiga qo'shimcha ravishda kalit so'z yoki RGB qiymati qo'llab-quvvatlanadi. Misollar:
Rgb veb-sayti fon (23,113,44)
Yashil veb-sayt fonida
Kalit so'zlar yordamida fon ranglarini sozlash boshqa ikkita usul bilan taqqoslaganda bir qator cheklovlarga ega.
Html rang uchun faqat 16 ta kalit so'zni qo'llab-quvvatlaydi. Mana, ulardan bir nechtasi: oq, qizil, ko'k, qora, sariq va boshqalar.
Shuning uchun, html saytining fonini sozlash uchun, o'n oltilik formatni yoki RGB-ni ishlatish yaxshiroqdir.
Rang tanlashdan tashqari, boshqa sozlamalar ham mavjud. Agar fonning rangi shaffof bo'lsa, sahifaning foni shaffof bo'ladi. Ushbu qiymat sukut bo'yicha ushbu mulkka tayinlangan.
Endi sayt uchun devor qog'ozini o'rnatish uchun gipermatnli tilning imkoniyatlarini ko'rib chiqing. Buni background-image xossasi yordamida amalga oshirish mumkin.
Koddan ko'rinib turibdiki, rasm qavs ichida berilgan url yo'li bilan bog'langan. Ammo hamma rasmlar shunchalik katta bo'ladiki, butun ekran maydonini o'lchamlari bilan to'ldira olmaydi. Keling, kichkina rasm qanday ko'rsatilishini ko'rib chiqaylik.
Aytaylik, biz she'rlar haqida sayt yaratmoqdamiz va Pegasus tasvirini substrat sifatida ishlatishimiz kerak. Qanotli ot shoir ijodiy fikrining erkinligini aks ettiradi!
Tasvir ekranning o'rtasida bir marta ko'rsatilishi kerak. Ammo, afsuski, brauzer bizning katta istaklarimizni tushunmaydi. Va u saytning fonida kichkina rasmni ekranning maydoniga sig'adigan darajada ko'p marta namoyish etadi:
Ehtimol qanotli to'rt tabassumli otlar shoirlarni ilhomlantirishi mumkin. Shuning uchun biz Pegasusimizni klonlashni taqiqlaymiz. Biz buni fon-takrorlash xususiyati yordamida qilamiz. Mumkin bo'lgan qiymatlar:
- takrorlash-x - fon rasmini gorizontal ravishda takrorlang;
- takrorlash-y - vertikal;
- takrorlash - ikkala o'qda;
- takrorlamaslik - takrorlash taqiqlanadi.
Ro'yxatda keltirilgan variantlar orasida biz ikkinchisiga qiziqamiz. Saytning fonini o'zgartirishdan oldin biz uni o'zimizning kodda ishlatamiz:
Ammo, albatta, bizning varaqamiz ekranning o'rtasida joylashgan bo'lsa yaxshiroqdir. Background-location xususiyati sahifadagi fon rasmini joylashtirish uchun mo'ljallangan. Joylashuv koordinatalarini bir necha usul bilan o'rnatishingiz mumkin:
- Kalit so'z ( yuqori, pastda, o'rtada, chapda, o'ngda);
- Foiz - sanoq chap chap burchakdan boshlanadi;
- O'lchov birligida (piksel).
Biz markazlashtirishning eng oddiy variantidan foydalanamiz:
Aylantirish paytida siz rasmning o'rnini to'g'rilashingiz kerak bo'ladi. Shuning uchun, saytning fonini rasmga olishdan oldin, maxsus fon-ilova xususiyatidan foydalaning. U qabul qilgan qiymatlar:
- aylantirish;
- sobit
Bizga oxirgi qiymat kerak. Endi bizning misolimizning kodi quyidagicha bo'ladi:
Saytning teksturali fon
Birinchi misolda, fon uchun biz katta va chiroyli cho'l landshaftidan foydalandik. Ammo bunday go'zallik uchun siz to'liq to'lashingiz kerak. Yuqori sifatli qilingan rasmning vazni bir necha megabaytga etishi mumkin.
Ushbu miqdor yuqori tezlikda Internetga ulangan brauzerning sahifani yuklash tezligiga ta'sir qilmaydi. Ammo bir necha "metr" ni yuklab olish ko'p vaqtni talab qiladigan mobil Internet haqida nima deyish mumkin?
Hammaga salom! Siz bilan bog'lanishda, sizning kamtar xizmatkoringiz sayt uchun fonni qanday o'rnatish kerakligi haqida foydali va amaliy materialdan bir qismi bilan. Bu html tartibining boshlanishidir va bu erda men qanday qilib Internet foydalanuvchisini o'ziga xos tarzda o'ziga tortadigan va o'ziga xosligini beradigan sayt uchun chiroyli fonni yaratishingiz mumkinligini ko'rsataman.
Agar siz e'tibor bergan bo'lsangiz, unda Internet-biznesning aksariyati sotuvlar va obuna sahifalarida noyob fondan foydalanadilar. Bugun biz ushbu jarayonning texnik tarkibiy qismini tahlil qilamiz.
Shunday qilib, yangi boshlanuvchilar uchun, albatta, rasm kerak. Xorijiy Internetda juda yaxshi sayt mavjud bo'lib, unda siz turli xil bepul yuklab olishingiz mumkin veb-sayt fonida rasmlar. U erda juda ko'p narsa bor. Sayt nozik naqshlar deb nomlanadi.
Bu birinchi navbatda Google qidiruv ro'yxatida paydo bo'ladi, shuning uchun uni o'z ishimda tavsiya qilaman. Agar siz qidiruv tizimida "fon rasmlarining naqshlari", "sayt uchun fon rasmini yuklab olish" va hokazolarni yozsangiz, ko'plab boshqa saytlarni topishingiz mumkin.
Agar sizda ingliz tilida muammolar bo'lmasa, unda siz buni qiyinchiliksiz tushunasiz.
Ushbu maqolada men mavzuni tanladim va u tweed deb nomlangan. Siz yuklab olishingiz mumkin.
Bu saytdagi kichik versiyada qanday ko'rinishga ega
Birinchidan, dasturda yangi hujjat yarating
Masalan, tahrirlashdan oldin uni nom ostida saqlaganingizga ishonch hosil qiling indeks.html va kompyuteringizda papka yarating, masalan, siz "Mening saytim" papkasini yaratishingiz va unga bizning indeks faylimizni (index.html) qo'yishingiz mumkin, brauzer va veb-sayt displeyi o'rtasida noto'g'ri chalkashlik bo'lmasligi uchun ingliz tilida papka yaratgan ma'qul.
Bundan tashqari, "mening saytim" asosiy papkasida siz yana ikkita pastki papkalarni yaratishingiz kerak, bittasida biz barcha rasmlarimizni qo'yamiz va "rasmlar" deb nomlaymiz, ikkinchisiga "CSS" (uslublar kaskadli jadvallari) nomini beramiz va faylni o'sha joyga joylashtiramiz. uslubi.css
Endi siz bizning hujjatimizda ishlashingiz mumkin. Keyingi qadam, html kodining bir qismini, ya'ni hamma boshlanadigan asosiy freymni kiritishimiz kerak. Siz uni to'g'ridan-to'g'ri yuklab olishingiz mumkin. Keyinchalik, hamma narsani ushbu fayldan nusxa oling va uni dastur faylimizga o'tkazing. Natijada quyidagicha bo'lishi kerak
Fayl nomi yonidagi qizil disketani ko'rasiz. Shunday qilib, agar u qizil bo'lsa, unda fayl saqlanmagan, disk ko'k rangga aylanishi uchun saqlash tugmachasini bosganingizga ishonch hosil qiling.
Sarlavha yorlig'ida siz hujjat nomini o'zgartirishingiz mumkin, masalan, siz "Mening birinchi veb-sahifam" ni qilishingiz mumkin. Sahifangiz kodlanganligiga ishonch hosil qiling UTF - 8
Aks holda, agar boshqa kodlash mavjud bo'lsa, masalan windows-1251, u holda brauzerdagi hujjat matni ierogliflarda ko'rsatiladi. Siz kodlashni dasturiy asboblar panelidagi "Kodlash - Utf-8-dagi kod (BOM bo'lmagan holda)" bo'limida o'zgartirishingiz mumkin.
Va har bir harakatlarimizni saqlashni unutmang.
Endi biz hujjatimizning fonini yaratishni boshlaymiz. Darhol aytishim kerakki, veb-sahifani loyihalashda bizning barcha harakatlarimiz CSS deb nomlangan kaskadli jadvallar yordamida amalga oshiriladi, ya'ni biz html-da freymni yaratamiz va uni chiroyli uslubga keltiramiz va CSS-dan foydalanamiz.
Shunday qilib, siz to'g'ri harakat yo'nalishiga ko'nikasiz. Html hujjatidagi uslublar bilan bevosita shug'ullanishning hojati yo'q, ularni alohida hujjatga joylashtirish yaxshidir.
Buning uchun Notepad ++ dasturimizda boshqa fayl yarating va unga Style.css nomini bering va uni "Mening saytim" umumiy papkasida joylashgan yangi css papkasida saqlang.
Ajoyib! Sahifani to'g'ri ko'rsatishi uchun bizning brauzerimiz stil jadvalini html hujjatimizga qo'shishlari kerak. Buni qanday qilish kerak.
To'g'ridan-to'g'ri yuqoridagi satrni kiriting. Ushbu chiziq bilan biz jadval jadvalimizni bog'laymiz.
Endi biz jadval yorlig'i yordamida tanamiz yorlig'i uchun orqa fon rasmini aniqlaymiz. Buning uchun biz style.css hujjatida quyidagi tuzilmani yaratamiz (to'g'ridan-to'g'ri dastur kodini olish va yozish).
Bu erda bir oz tushuntiraman. Fon atributi ko'pgina qiymatlarga ega, ulardan biri fon-takrorlash bo'lib, veb-hujjat uchun bizning fon rasmimizni shunchaki cho'zish uchun javob beradi.
Orqaga qaytarish:
REPEAT // (gorizontal va vertikal ravishda takrorlash) REPEAT-X // (faqat gorizontal ravishda cho'zish) REPEAT-Y // (faqat vertikal ravishda cho'zilgan) NO-REPEAT // (orqa fon rasmini takrorlamang)
Bizning holda, biz kichkina rasmimizni vertikal va gorizontal ravishda takrorlaymiz. Natijada, butun sahifa bizning rasmimiz bilan to'ldiriladi. Brauzerda quyidagicha ko'rinadi:
Bundan tashqari, siz uchun maxsus, men sayt uchun chiroyli fonni yuklab olishingiz mumkin bo'lgan saytlarni tanladim
Zamonaviy brauzerlar elementga o'zboshimchalik bilan fon rasmlarini qo'shish imkonini beradi, har bir fon parametrlarini vergul bilan ro'yxatlash. Umumjahon mulk fonidan foydalanish kifoya va birinchi navbatda bitta fonni, ikkinchisini vergul bilan ajratib ko'rsatish kerak.
Fonni derazaning to'liq kengligiga qanday yopishtirish kerak?
Fon hajmining xususiyati fonni kattalashtirish uchun mo'ljallangan, 100% uning qiymati sifatida ko'rsatilgan, shunda fon brauzer oynasining butun kengligini egallaydi. Brauzerlarning eski versiyalari uchun, 1-misolda ko'rsatilgandek, prefiksli o'ziga xos xususiyatlardan foydalanish kerak.
Fon rasmini veb-sahifaga qanday qo'shish kerak?
Veb-sahifaga fon rasmini qo'shish uchun, fon uslubi xususiyatining url-ichidagi rasmga yo'lni belgilang, bu tanlangan tanlagichga qo'shiladi.
Animatsiya fonini yaratish mumkinmi?
Animatsiya bu har qanday hujjatni jonlantiradigan etarlicha kuchli texnikadir, shuning uchun Flash texnologiyasi juda mashhur bo'lib ketganligi ajablanarli emas, bu veb-sahifalarga multfilmlarni, shuningdek, interfaollarni qo'shadi. GIF grafik formati kadrlarni ketma-ket o'zgartirib oddiy animatsiyalarni ham qo'llab-quvvatlaydi. Shunday qilib, ushbu formatdagi rasmdan foydalanib, nafaqat individual rasmlarni, balki veb-sahifaning yoki ma'lum bir elementning fonini ham jonlantirish mumkin.
Birinchidan, siz animatsion GIF tasvirini yaratishingiz kerak, buning uchun Adobe Photoshop dasturidan foydalanishingiz mumkin yoki boshqa maqsad uchun mos. Orqa fon sifatida ishlatilishi mumkin bo'lgan tayyor animatsion fayllarning kutubxonalari ham mavjud. Keyinchalik, rasm 1-rasmda ko'rsatilgandek fon uslubi xususiyatidan foydalanib, fon sifatida qo'shiladi.
Fon rasmini sahifaning pastki o'ng burchagiga qanday qo'yish kerak?
Sahifadagi fon rasmining holatini boshqarish uchun stil xususiyati background-location ishlatiladi, u bir vaqtning o'zida gorizontal va vertikal ravishda tasvir koordinatalarini o'rnatadi. Orqa fon rasmini takrorlashni bekor qilish uchun, qaytarib bo'lmaydigan qiymatga ega bo'lgan orqa fon pozitsiyasidan foydalaning.
Qayta takrorlanmaslik uchun qanday qilib fonni yaratish kerak?
Odatiy bo'lib, orqa fon gorizontal va vertikal ravishda takrorlanadi va butun veb-sahifa maydonida mozaikani joylashtiradi. Biroq, bu fon xatti-harakati har doim ham talab qilinmaydi, ayniqsa bitta rasmni qo'yishda, shuning uchun fon uslubi xususiyatiga qo'shilgan qaytarilmaydigan qiymat qutqariladi.
Qanday qilib fonni faqat vertikal holda takrorlash mumkin?
Orqa fonni takrorlash odatda veb-sahifaning elementi yoki oynasining balandligiga bog'laydigan dekorativ chiziqlar yoki gradyanlarni yaratish uchun talab qilinadi. Bunday hollarda, fonni vertikal ravishda takrorlash, elementlarning o'lchamidan qat'i nazar, qattiq rasmni beradi. Faqat boshida fon rasmini bo'g'inlarsiz takrorlash haqida tashvishlanishingiz kerak.
Muallifdan: Barchani qutlayman. Fon ranglari va veb-dizayndagi rasmlar juda katta ahamiyatga ega, chunki ular har qanday elementlarni yanada jozibali tarzda loyihalashga imkon beradi. Html-da qanday qilib fon yaratiladi, biz bugun ko'rib chiqamiz.
Fonni sozlashda html bilan bajarish mumkinmi?
Aytishim kerakki, yo'q. Umuman olganda, html veb-sahifalarni bezash uchun mo'ljallanmagan. Bu juda noqulay. Masalan, bgcolor atributi mavjud, uning yordamida siz fon rangini o'rnatishingiz mumkin, ammo bu juda noqulay.
Shunga ko'ra, biz kaskadli uslublar jadvallaridan (css) foydalanamiz. Orqa fonni o'rnatish uchun ko'proq imkoniyatlar mavjud. Bugun biz eng asosiyni tahlil qilamiz.
CSS orqali fonni qanday o'rnatish kerak?
Shunday qilib, birinchi navbatda, qaysi element fonni belgilashi kerakligini hal qilishingiz kerak. Ya'ni, biz qoida yozadigan selektorni topishimiz kerak. Masalan, agar siz butun sahifaning fonini bir butun sifatida o'rnatmoqchi bo'lsangiz, buni tanani tanlagich orqali, div selektor orqali barcha bloklarga qilishingiz mumkin. Xo'sh, va boshqalar. Fon har qanday boshqa tanlovchilarga qo'shilishi mumkin va qo'shilishi kerak: uslublar sinflari, identifikatorlari va boshqalar.
Selektor haqida qaror qabul qilganingizdan so'ng, siz mulkning nomini yozishingiz kerak. Fon rangi xususiyati fon rangini belgilash uchun ishlatiladi (aniq rang, gradient emas va rasm emas). Shundan so'ng siz yo'g'on ichakni qo'yishingiz va rangni o'zi yozishingiz kerak. Buni ko'p jihatdan qilish mumkin. Masalan, kalit so'zlardan foydalanish, hex kod, rgb, rgba, hsl formatlari. Har qanday yo'l bo'lar edi.
Eng ko'p ishlatiladigan usul - o'n oltilik kod. Ranglarni tanlash uchun siz rang kodini ko'rsatadigan dasturdan foydalanishingiz mumkin. Masalan, fotoshop, bo'yoq yoki ba'zi onlayn vositalar. Shunga ko'ra, misol uchun men butun veb-sahifa uchun umumiy ma'lumotni yozaman.
tana (orqa fon rangi: # D4E6B3;)
Ushbu kodni bosh qismga kiritish kerak. Fayllarning bitta papkada bo'lishi juda muhimdir.
Rasm fon sifatida
Rasm sifatida men kichkina html til belgisini ishlataman:
Identifikator bilan bo'sh blokni yarating:
< div id = "bg" > < / div > |
Uning aniq o'lchamlari va orqa fonini o'rnataylik:
#bg (kengligi: 400px; balandligi: 250px; fon-rasm: url (html.png);)
#bg ( kengligi: 400px; balandligi: 250px; fon - rasm: url (html. png); |
Ushbu koddan men yangi xususiyat - fon-tasvirni ishlatganligimni ko'rishingiz mumkin. Bu html elementiga faqat fon sifatida rasm qo'shish uchun mo'ljallangan. Nima bo'lganini ko'rib chiqaylik:
Rasmni belgilash uchun siz URL-dan keyin URL-kalit so'zini yozishingiz va keyin qavs ichida faylga yo'lni ko'rsatishingiz kerak. Bunday holda, rasm html hujjati bilan bir xil papkada joylashganligi asosida yo'l ko'rsatiladi. Rasm formatini ham ko'rsatishingiz kerak.
Agar siz buni qilgan bo'lsangiz, lekin fon hali ham blokda ko'rinmasa, agar yo'l va kengaytma to'g'ri o'rnatilgan bo'lsa, rasmning nomini to'g'ri yozganingizni tekshiring. Bular fonda ko'rinmaydigan eng keng tarqalgan sabablar, chunki brauzer rasmni topa olmaydi.
Ammo bitta xususiyatni payqadingizmi? Brauzer rasmni butun blok bo'ylab oldi va ko'paytirdi. Shunday qilib, bilishingiz uchun, bu fon rasmlarining odatiy xatti-harakati - ular blokga sig'guncha vertikal va gorizontal ravishda takrorlanadi. Ushbu xatti-harakatni osongina boshqarishingiz mumkin. Buning uchun 4 ta asosiy qiymatga ega bo'lgan fon-takrorlash xususiyatidan foydalaning:
Takrorlash - asl qiymati, rasm har ikki tomonda ham takrorlanadi;
Repeat-x - bu faqat ois x da takrorlanadi;
Repeat-y - faqat y o'qi bo'ylab takrorlanadi;
Qayta takrorlanmaydi - umuman takrorlanmaydi;
Siz har bir qiymatni belgilashingiz va nima bo'lishini ko'rishingiz mumkin. Men buni shunday yozaman:
fon-takrorlash: takrorlash-x;
fon - takrorlash: takrorlash - x; |
Endi takrorlash faqat gorizontal holatda. Agar siz "takrorlashsiz" ro'yxatdan o'tsangiz, unda bitta rasm bo'ladi.
Xo'sh, bu erda allaqachon tugatish mumkin, chunki bu fon bilan ishlashning asosiy xususiyatlari, ammo men sizga qo'shimcha boshqarish imkoniyatlarini olish imkonini beradigan yana ikkita xususiyatni ko'rsataman.
Qayta takrorlash yordamida dizaynerlar bitta kichkina rasm yordamida fon teksturalari va gradientlarini yaratdilar. Bu 30 dan 10 pikselgacha yoki undan kichikroq bo'lishi mumkin. Yoki biroz ko'proq. Tasvir shunday bo'ldiki, uni bir tomonga yoki hatto har ikki tomonga ham takrorlanganda, hech qanday o'tishlar ko'rinmasdi, natijada bitta yaxlit fon hosil bo'ldi. Aytgancha, agar siz saytingizda choksiz teksturani fon sifatida ishlatmoqchi bo'lsangiz, ushbu yondashuvdan hozir foydalanish kerak. Bugungi kunda, gradientni css3 usullari yordamida allaqachon amalga oshirish mumkin, biz bu haqda keyinroq gaplashamiz.
Fon holati
Odatiy bo'lib, orqa fon rasmida, agar takrorlash talab qilinmasa, blokning yuqori chap burchagida bo'ladi. Lekin pozitsiyani background-location xususiyatidan foydalanib osongina o'zgartirish mumkin.
Siz uni turli yo'llar bilan o'rnatishingiz mumkin. Variantlardan biri shunchaki rasmning tomonlarini ko'rsatishdir:
orqa-holati: o'ng yuqori;
fon - pozitsiya: o'ng yuqori; |
Ya'ni, hamma narsa vertikal ravishda bir xil bo'lib qoldi: fon rasmlari tepada, lekin gorizontal ravishda biz tomonni o'ngga, ya'ni o'ng tomonga o'zgartirdik. Joyni belgilashning yana bir usuli foizda. Bu holda sanash har qanday holatda ham yuqori chap burchakdan boshlanadi. 100% - butun blok. Shunday qilib, rasmni markazga qo'yish uchun quyidagicha yozing:
fon holati: 50% 50%;
fon - lavozimi: 50% 50%; |
Joylashtirish bilan bog'liq bitta muhim narsani eslang - birinchi parametr har doim gorizontal pozitsiyani, ikkinchisi - vertikalni ko'rsatadi. Shunday qilib, agar siz 80% 20% qiymatini ko'rsangiz, darhol fon rasmining o'ng tomonga siljiydi degan xulosaga kelishingiz mumkin, ammo u juda pastga tushmaydi.
Va nihoyat, siz pozitsiyani piksel bilan belgilashingiz mumkin. Hammasi bir xil, faqat px o'rniga px bo'ladi. Ba'zi hollarda, bunday joylashishni aniqlash kerak bo'lishi mumkin.
Qisqa yozuv
Agar hamma narsa biz singari o'rnatilgan bo'lsa, kod juda noqulay ekanligiga rozi bo'ling. Ko'rinib turibdiki, rasmning yo'lini va takrorlanishini va o'rnini belgilash kerak. Albatta, takrorlash va pozitsiya har doim ham zarur emas, lekin har qanday holatda, stenografiya yozuvlaridan foydalanish yanada to'g'ri bo'ladi. Bu quyidagicha:
fon: # 333 url (bg.jpg) takrorlanmaydi 50% 50%;
orqa fon: # 333 url (bg.jpg) takrorlanmaydigan 50% 50%; |
Ya'ni, birinchi navbatda, agar kerak bo'lsa, umumiy qattiq fon rangini qayd etishingiz kerak. Keyin tasvir, takrorlash va pozitsiyaga yo'l. Agar biron-bir parametr kerak bo'lmasa, uni shunchaki qoldiring. Qabul qilaman, bu ancha tez va qulayroqdir va biz o'z kodimizni sezilarli darajada kamaytiramiz. Umuman olganda, sizga faqat rang yoki rasmni ko'rsatishingiz kerak bo'lsa ham, har doim qisqartirilgan shaklda yozishni maslahat beraman.
Fon rasmining hajmini nazorat qilamiz
Bizning hozirgi rasmimiz keyingi hiyla-nayrangni namoyish qilish uchun juda mos emas, shuning uchun men boshqasini olaman. Hajmi bo'yicha, u blok yoki undan ko'prog'iga o'xshash bo'lsin. Shunday qilib, sizning vazifangiz borligini tasavvur qiling: blokni to'liq to'ldirmasligi uchun fon rasmini yaratish. Rasm, masalan, blok o'lchamidan ham kattaroqdir.
Bunday holatda nima qilish kerak? Albatta, eng oddiy va oqilona variant rasmni shunchaki qisqartirish bo'lar edi, lekin buni qilish har doim ham mumkin emas. Aytaylik, bu serverda va hozirda uni kamaytirish uchun vaqt va imkoniyat yo'q. Muammoni nisbatan yangi deb atash mumkin bo'lgan va fon rasmining o'lchamlarini va har qanday fonni boshqarishga imkon beradigan fon o'lchamlari xususiyati yordamida hal qilish mumkin.
Shunday qilib, mening rasmim endi blokda hamma joyni egallaydi, lekin men unga fon hajmini beraman:
fon hajmi: 80% 50%;
fon - hajmi: 80% 50%; |
Shunga qaramay, birinchi parametr gorizontal o'lchamni, ikkinchisi - vertikalni o'rnatadi. Biz hamma narsa to'g'ri bajarilganligini ko'ramiz - fotosurat blokning kengligining 80% va bo'yining yarmiga teng bo'lgan. Bu erda siz faqat bitta aniqlik kiritishingiz kerak - hajmni foiz bilan belgilash orqali siz rasmning nisbatlariga ta'sir qilishingiz mumkin. Shunday qilib, nisbatlardan xafa bo'lishni istamasangiz ehtiyot bo'ling.
Siz taxmin qilganingizdek, fon o'lchami piksellarda ham ko'rsatilishi mumkin. Yana foydalanishingiz mumkin bo'lgan yana ikkita muhim kalit so'z mavjud:
Qopqoq - hech bo'lmaganda uning bir tomoni blokni to'liq to'ldirishi uchun rasm kattalashtiriladi.
Tarkibida - tarozi shuki, rasm blokka maksimal darajada tushishi mumkin.
Ushbu qadriyatlarning afzalliklari shundaki, ular rasmning nisbatlarini o'zgartirmaydi va ularni bir xil qoldiradi.
Rasmni cho'zish uning sifatining yomonlashishiga olib kelishi mumkinligini ham tushunishingiz kerak. Men dizaynerlarning hayoti va amaliy tajribasidan misol keltira olaman. Hamma ish stoli uchun sxemalar tuzishda saytni asosiy monitor kengliklariga moslashtirish kerakligini hamma biladi va tushunadi: 1280, 1366, 1920. Agar siz fon rasmini olsangiz, aytaylik, 1280 dan 200 gacha bo'lsa va unga fon o'lchamini bermasangiz, unda ekranlar kengroq bo'ladi bo'sh joy paydo bo'ladi, rasm kenglikni to'liq to'ldirmaydi.
99% hollarda, bu veb-ishlab chiqaruvchiga mos kelmaydi, shuning uchun u fon o'lchamini o'rnatadi: rasm har doim oynaning maksimal kengligigacha cho'zilishi uchun. Bu juda yaxshi usul, ammo endi siz ekranning kengligi 1920 piksel bo'lgan foydalanuvchilar suboptimal sifatli rasmni ko'rishi mumkin bo'lgan muammoga duch kelasiz.
Esimda, u maksimal kenglikka etadi. Shunga ko'ra, sifat avtomatik ravishda yomonlashadi. Bu erda yagona to'g'ri echim dastlab kattaroq tasvirni ishlatish kerak - kengligi 1920 piksel. Keyin, eng keng ekranlarda, u tabiiy hajmda bo'ladi, boshqalarida esa shunchaki asta-sekin kesiladi, lekin shu bilan birga, fon rasmini to'g'ri tanlash bilan bu saytning tashqi ko'rinishiga ta'sir qilmaydi.
Umuman olganda, bu ushbu maqolada olgan bilimlaringizni haqiqiy sxemalarni tuzishda qanday ishlatishning faqat bitta namunasi.
Css yordamida shaffof fon
CSS-dan foydalanib amalga oshirilishi mumkin bo'lgan yana bir xususiyat - bu shaffof fon. Ya'ni, bu fonda uning orqasida nima borligini aniqlash mumkin bo'ladi.
Masalan, men butun sahifani avvalgi misollardan foydalangan fon rasm sifatida o'rnataman. Biz barcha tajribalarimizni o'tkazadigan bg identifikatori bo'lgan blok uchun rgba rang formatidan foydalanib, fonni o'rnatamiz.
Yuqorida aytib o'tganimdek, css rangni aniqlash uchun ko'plab formatlarga ega. Ulardan biri rgb, grafik muharrirlarda ishlaydiganlar uchun juda mashhur format. Bu shunday yozilgan: rgb (17, 255, 34);
Qavslardagi birinchi qiymat - qizil, keyin yashil, keyin ko'kning to'yinganligi. Qiymat 0 dan 255 gacha raqamli bo'lishi mumkin, shunga ko'ra, rgba formati farq qilmaydi, faqat bitta parametr qo'shiladi - alfa kanali. Qiymat 0 dan 1 gacha bo'lishi mumkin, bu erda 0 to'liq shaffoflik.
