Fon rasmi html. Har doim sahifa bo'ylab cho'zilgan fon

Muallifdan: Hammani tabriklayman. Fon ranglari va tasvirlar veb -dizaynda katta rol o'ynaydi, chunki ular har qanday elementlarni yanada jozibali dizayn qilish imkonini beradi. Bugun biz html -da qanday qilib fon yaratish kerakligini ko'rib chiqamiz.

Orqa fonni o'rnatishda html bilan ishlash mumkinmi?

Darhol aytishim kerakki, yo'q. Odatda html veb -sahifalarni uslublash uchun mo'ljallanmagan. Bu shunchaki juda noqulay. Masalan, fon rangini o'rnatishingiz mumkin bo'lgan bgcolor atributi bor, lekin bu juda noqulay.

Shunga ko'ra, biz kaskadli uslublar jadvallarini (CSS) ishlatamiz. Orqa fonni sozlash uchun yana ko'p variantlar mavjud. Bugun biz eng asosiylarini tahlil qilamiz.

CSS orqali fonni qanday sozlash mumkin?

Shunday qilib, birinchi navbatda, fonni qaysi elementga o'rnatish kerakligini hal qilishingiz kerak. Ya'ni, biz qoidani yozadigan tanlovchini topishimiz kerak. Masalan, agar fonni butun sahifa uchun sozlash kerak bo'lsa, buni tan tanlagich orqali, barcha bloklar uchun - div tanlash vositasi orqali qilishingiz mumkin. Xo'sh, va hokazo. Fon har qanday boshqa tanlovchilarga bog'lanishi mumkin va bo'lishi kerak: uslublar sinflari, identifikatorlar va boshqalar.

Tanlovchiga qaror qilganingizdan so'ng, siz mulk nomini yozishingiz kerak. Orqa fon rangini belgilash uchun (gradient yoki tasvir emas, balki tekis rang), background-color xususiyatidan foydalaning. Shundan so'ng, siz ikki nuqta qo'yishingiz va rangning o'zi yozishingiz kerak. Bu turli yo'llar bilan amalga oshirilishi mumkin. Masalan, kalit so'zlar, o'n oltilik kod yordamida, rgb formatlari, rgba, hsl. Har qanday usul yordam beradi.

Eng ko'p ishlatiladigan usul - o'n oltilik kod. Ranglarni moslashtirish uchun siz rang kodi ko'rinadigan dasturdan foydalanishingiz mumkin. Masalan, fotoshop, bo'yoq yoki boshqa onlayn vosita. Shunga ko'ra, masalan, men butun veb -sahifa uchun umumiy ma'lumot yozaman.

tana (fon rangi: # D4E6B3;)

Bu kodni bosh qismiga kiritish kerak. Fayllar bitta papkada bo'lishi muhim.

Rasm fon sifatida

Men rasm sifatida kichik belgidan foydalanaman. html tili:

Identifikatorli bo'sh blok yarataylik:

< div id = "bg" > < / div >

Keling, aniq o'lcham va fonni beraylik:

#bg (kengligi: 400 piksel; balandligi: 250 piksel; fon tasviri: url (html.png);)

#bg ( kengligi: 400 piksel; balandligi: 250 piksel; fon - rasm: url (html. png);

Bu koddan, men yangi xususiyat - background -image ishlatganimni ko'rishingiz mumkin. Bu html elementi uchun fon sifatida tasvir kiritish uchun mo'ljallangan. Keling, nima bo'lganini ko'rib chiqaylik:

Rasm o'rnatish uchun siz ikki nuqta qo'yishingiz kerak kalit so'z url, keyin qavs ichida faylga yo'lni belgilang. Bu holda, yo'l html hujjati bilan bir papkada joylashganligiga asoslanib ko'rsatiladi. Rasm formatini ham ko'rsatish kerak.

Agar siz buni qilgan bo'lsangiz va fon hali ham blokda ko'rinmasa, rasmning nomini to'g'ri yozganingizni, yo'l va kengaytma to'g'ri ko'rsatilganligini yana tekshiring. Brauzer tasvirni topa olmagani uchun bu fon shunchaki ko'rsatilmasligining eng keng tarqalgan sabablari.

Lekin siz bitta o'ziga xoslikni payqadingizmi? Brauzer tasvirni butun blok bo'ylab oldi va takrorladi. Shunday qilib, siz bilganingizdek, bu fon tasvirlarining odatiy xatti -harakati - ular blokga mos kelguncha vertikal va gorizontal tarzda takrorlanadi. Siz bu xatti -harakatni osongina boshqarishingiz mumkin. Buning uchun 4 ta asosiy qiymatga ega bo'lgan fon-takrorlash xususiyatidan foydalaning:

Takrorlash - standart qiymat, tasvir ikki tomondan takrorlanadi;

Repeat -x - faqat ois x uchun takrorlanadi;

Repeat-y-faqat y o'qi bo'ylab takrorlanadi;

Takrorlanmaydi - umuman takrorlanmaydi;

Siz har bir qiymatni yozishingiz va nima bo'lishini ko'rishingiz mumkin. Men buni shunday yozaman:

fon-takrorlash: takrorlash-x;

fon - takrorlash: takrorlash - x;

Endi faqat gorizontal ravishda takrorlang. Takrorlanmasa, bitta rasm bo'ladi.

Ajoyib, siz buni tugatishingiz mumkin, chunki bu fon bilan ishlashning asosiy imkoniyatlari, lekin men sizga yana 2 ta xususiyatni ko'rsataman, bu sizga ko'proq nazorat qilish imkonini beradi.

Takrorlash bilan, dizaynerlar bitta kichkina tasvir yordamida fon to'qimalariga va gradyanlarga erishadilar. Bu 30 dan 10 pikselgacha yoki undan kam bo'lishi mumkin edi. Balki biroz ko'proq. Tasvir shunday bo'lganki, u bir tomondan yoki hatto ikki tomondan takrorlanganda, hech qanday o'tish ko'rinmasdi, natijada bitta qattiq fon olinadi. Aytgancha, agar siz saytingizda uzluksiz teksturani fon sifatida ishlatmoqchi bo'lsangiz, bu yondashuvni hozir ishlatishga arziydi. Bugungi kunda gradientni allaqachon CSS3 usullari yordamida amalga oshirish mumkin, biz bu haqda albatta gaplashamiz.

Orqa fon pozitsiyasi

Standart fon rasmi agar takrorlash ko'rsatilmagan bo'lsa, u chap tomonda bo'ladi yuqori burchak sizning blokingiz. Ammo "background-position" xususiyati yordamida pozitsiyani osongina o'zgartirish mumkin.

Siz uni turli yo'llar bilan so'rashingiz mumkin. Variantlardan biri - rasm joylashishi kerak bo'lgan tomonlarni ko'rsatish:

fon-pozitsiya: o'ng yuqori;

fon - pozitsiya: o'ng yuqori;

Ya'ni, vertikal ravishda hamma narsa o'zgarmadi: fon rasmi tepada, lekin gorizontal ravishda biz yon tomonni o'ngga, ya'ni o'ngga o'zgartirdik. Pozitsiyani belgilashning yana bir usuli - bu foiz. Bu holda, hisoblagich har qanday holatda ham yuqori chap burchakdan boshlanadi. 100% - butun blok. Shunday qilib, rasmni aynan markazga joylashtirish uchun biz shunday yozamiz:

fon pozitsiyasi: 50% 50%;

fon - pozitsiya: 50% 50%;

Joylashtirish bilan bog'liq muhim bir narsani eslang - birinchi parametr har doim gorizontal holat, ikkinchisi esa vertikal holat. Shunday qilib, agar siz 80% 20% qiymatini ko'rsangiz, darhol xulosa qilishingiz mumkinki, fon tasviri o'ng tomonga keskin siljiydi, lekin u unchalik pasaymaydi.

Va nihoyat, siz pozitsiyani piksellarda yozishingiz mumkin. Hammasi bir xil, lekin% o'rniga px bo'ladi. Ba'zi hollarda, bu joylashishni aniqlash ham zarur bo'lishi mumkin.

Qisqartirilgan yozuv

Qabul qiling, agar hamma narsa biz qilganidek bo'lsa, kod juda og'ir bo'lib chiqadi. Ma'lum bo'lishicha, rasmga yo'l, takrorlash va pozitsiyani belgilash kerak. Albatta, takrorlash va pozitsiya har doim ham zarur emas, lekin har qanday holatda ham, stenografiya xususiyati belgisidan foydalanish to'g'ri bo'ladi. Bu shunday ko'rinadi:

fon: # 333 url (bg.jpg) takrorlanmaydi 50% 50%;

fon: # 333 url (bg.jpg) takrorlanmaydi 50% 50%;

Ya'ni, birinchi qadam, agar kerak bo'lsa, umumiy qattiq fon rangini yozib olishdir. Keyin tasvirga yo'l, takrorlash va pozitsiya. Agar biron bir parametr kerak bo'lmasa, biz uni o'tkazib yuboramiz. Qabul qilaman, bu ancha tezroq va qulayroq, va biz o'z kodimizni sezilarli darajada kamaytiramiz. Umuman olganda, men sizga har doim qisqartmalar bilan yozishni maslahat beraman, hatto faqat rang yoki rasmni ko'rsatish kerak bo'lsa ham.

Fon rasmi hajmini nazorat qilish

Bizning hozirgi tasvirimiz keyingi hiyla uchun juda mos emas, shuning uchun men boshqasini olaman. Hajmi bo'yicha, u blokga o'xshash yoki undan kattaroq bo'lsin. Tasavvur qiling, sizning oldingizda vazifa turibdi: uning blokini to'liq to'ldirmasligi uchun fon tasvirini yaratish. Va rasm, masalan, blok o'lchamidan ham katta.

Bu holatda nima qila olasiz? Albatta, eng oddiy va oqilona variant - rasmni qisqartirish bo'ladi, lekin buni qilish har doim ham mumkin emas. Aytaylik, bu serverda va hozircha uni kamaytirishga vaqt yoki imkoniyat yo'q. Muammo, nisbatan yangi deb nomlanishi mumkin bo'lgan fon o'lchami xususiyatidan foydalanib hal qilinishi mumkin, bu sizga fon tasvirining hajmini va, albatta, har qanday fonni o'zgartirish imkonini beradi.

Shunday qilib, mening rasmim endi blokdagi hamma joyni egallaydi, lekin men unga fon hajmini beraman:

fon o'lchami: 80% 50%;

fon - o'lchami: 80% 50%;

Shunga qaramay, birinchi parametr - gorizontal o'lcham, ikkinchisi - vertikal o'lcham. Ko'ryapmizki, hamma narsa to'g'ri qo'llanilgan - fotosurat blokning 80% kengligi va yarmining balandligi. Bu erda siz bitta aniqlik kiritishingiz kerak - o'lchamni foizda belgilash orqali siz rasmning nisbatlariga ta'sir qilishingiz mumkin. Shuning uchun mutanosiblikdan chiqmaslik uchun ehtiyot bo'ling.

Siz taxmin qilganingizdek, fon o'lchami piksellarda ham ko'rsatilishi mumkin. Bundan tashqari, ikkita ma'noga ega kalit so'zlar ham mavjud:

Muqova - rasmning o'lchamlari shunday bo'ladiki, uning kamida bir tomoni blokni to'liq to'ldiradi.

Tarkib - rasmni maksimal o'lchamdagi blokga to'liq mos keladigan tarzda o'lchaydi.

Bu qadriyatlarning afzalligi shundaki, ular rasmning nisbatlarini o'zgartirmaydi, ularni bir xil qilib qo'yadi.

Shuningdek, siz tasvirni cho'zish uning sifatining yomonlashishiga olib kelishi mumkinligini tushunishingiz kerak. Men dizaynerlarning hayoti va haqiqiy amaliyotidan misol keltira olaman. Hamma biladi va tushunadi, ish stollarini kodlashda siz saytni monitorlarning asosiy kengliklariga moslashtirishingiz kerak: 1280, 1366, 1920. Agar siz, masalan, 1280 x 200 o'lchamdagi fon tasvirini olsangiz va o'rnatmasangiz. bu fon o'lchamida, keyin kengligi kattaroq bo'lgan ekranlar 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 kengligiga cho'ziladi. Bu yaxshi hiyla -nayrang, lekin hozir siz ekranning kengligi 1920 piksel bo'lgan foydalanuvchilar past sifatli tasvirni ko'rishlari mumkin bo'lgan muammoga duch kelasiz.

Eslatib o'taman, u maksimal kenglikka cho'ziladi. Shunga ko'ra, sifat avtomatik ravishda yomonlashadi. Bu erda yagona to'g'ri echim dastlab 1920 pikselli kengroq rasmni ishlatish bo'ladi. Keyin, eng keng ekranlarda u o'zining tabiiy o'lchamida bo'ladi, boshqalarida esa asta -sekin kesiladi, lekin shu bilan birga, fon rasmini to'g'ri tanlash bilan, tashqi ko'rinish sayt ta'sir qilmaydi.

Umuman olganda, bu haqiqiy maketlarni tuzishda ushbu maqolada olgan bilimlaringizdan foydalanishning faqat 1 misoli.

CSS bilan yarim shaffof fon

CSS yordamida amalga oshirilishi mumkin bo'lgan yana bir hiyla-bu yarim shaffof fon. Ya'ni, bu fon orqali uning ortida nima turganini ko'rish mumkin bo'ladi.

Misol sifatida, men butun sahifani misollarda ilgari ishlatgan fon tasviri sifatida o'rnataman. Bg identifikatori bo'lgan blok uchun biz barcha tajribalarni o'tkazamiz, biz rgba rang formati yordamida fonni o'rnatamiz.

Yuqorida aytib o'tganimdek, CSS -da ranglarni ko'rsatish uchun ko'plab formatlar mavjud. Ulardan biri-rgb, u ishlaydiganlar uchun juda mashhur format grafik muharrirlari... Bu shunday yozilgan: rgb (17, 255, 34);

Qavs ichidagi birinchi qiymat - qizil, keyin yashil, keyin ko'k ranglarning to'yinganligi. Qiymat 0 dan 255 gacha 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.

Veb -sayt yaratish mohiyatini o'rganayotgan ko'plab yangi dizaynerlar ko'pincha html -da fon tasvirini qanday yaratishni o'ylaydilar. Va agar kimdir bu vazifani aniqlay olsa, xuddi shu muammolar tasvirni monitorning kengligigacha cho'zish paytida paydo bo'ladi. Shu bilan birga, sayt barcha brauzerlarda bir xil ko'rsatilishini xohlardim, shuning uchun brauzerlararo talablar bajarilishi kerak. Orqa fonni ikkita usulda o'rnatishingiz mumkin: CSS -dan foydalanish va uslublar. Har kim o'zi uchun eng yaxshi variantni tanlaydi. Albatta, CSS uslubi ancha qulayroq, chunki uning kodi saqlanadi alohida fayl va saytning asosiy teglarida qo'shimcha ustunlar olinmaydi, lekin avval sayt fonida rasm o'rnatishning oddiy usulini ko'rib chiqaylik.

Fon yaratish uchun asosiy HTML teglar

Shunday qilib, savolga o'tamiz, html -dagi fon to'liq ekran. Sayt chiroyli ko'rinishi uchun siz bitta muhim tafsilotni tushunishingiz kerak: siz shunchaki gradientli fonni yasashingiz yoki uni tekis rangga bo'yashingiz kerak, lekin agar rasmni fonga kiritish kerak bo'lsa, u cho'zilmaydi. monitorning butun kengligi bo'ylab. Dastlab, siz sayt sahifasini ko'rsatadigan kengaytma yordamida rasmni tanlashingiz yoki o'zingiz dizayn qilishingiz kerak. Faqat fon rasmi tayyor bo'lgach, uni "Tasvirlar" nomli papkaga o'tkazing. Unda biz ishlatilgan rasmlar, animatsiyalar va boshqa grafik fayllarni saqlaymiz. Bu papka barcha html fayllari bilan ildiz katalogda bo'lishi kerak. Endi siz kodga o'tishingiz mumkin. Kod yozishning bir nechta variantlari mavjud, ular yordamida fon rasmga aylanadi.

1. Atribut yorlig'ini yozing.
2. HTML kodidagi CSS uslubi orqali.
3. CSS uslubini alohida faylga yozing.

HTML -dagi fonni qanday qilish sizga bog'liq, lekin men qanday qilib eng maqbul bo'lishi haqida bir necha so'z aytmoqchiman. Tag atributi orqali yozishning birinchi usuli anchadan buyon bekor qilingan. Ikkinchi variant juda kamdan -kam hollarda qo'llaniladi, chunki ko'pgina bir xil kod olingan. Va uchinchi variant - eng keng tarqalgan va samarali. Bu yerda HTML misollar teglar:

1. Yozishning birinchi usuli index.htm faylidagi (body) tag atributi orqali amalga oshiriladi. U quyidagi shaklda yozilgan: (body background = "Folder_name / Image_name.extension") ( / body). Ya'ni, agar bizda "Rasm" nomi va JPG kengaytmasi bo'lgan rasm bo'lsa va biz papkani "Tasvirlar" deb nomlagan bo'lsak, HTML kodi shunday bo'ladi: (body background = "Images / Picture.jpg") ... (/ tana) ...
2. Yozishning ikkinchi usuli CSS uslubiga ta'sir qiladi, lekin index.htm deb nomlangan faylda yoziladi. (tana uslubi = "fon: url (" ../ Tasvirlar / Picture.jpg ")").
3. Va yozishning uchinchi usuli ikkita faylda amalga oshiriladi. Index.htm deb nomlangan hujjatda quyidagi satr yoziladi: (head) (link rel = "stylesheet" type = "text / css" href = "CSS_file_path") ( / head). Style.css deb nomlangan uslublar jadvalida biz allaqachon yozamiz: tana (fon: url (Tasvirlar / Picture.jpg ")).

Biz HTML -da rasmni qanday qilib fonga aylantirishni aniqladik. Endi siz rasmni butun ekran kengligigacha qanday cho'zish kerakligini aniqlab olishingiz kerak.

Fon tasvirini deraza kengligiga cho'zish usullari

Keling, ekranimizni foiz sifatida tasavvur qilaylik. Ma'lum bo'lishicha, ekranning butun kengligi va uzunligi 100% x 100% bo'ladi. Biz tasvirni shu kenglikka cho'zishimiz kerak. Style.css faylidagi rasm yozuviga chiziq qo'shing, u tasvirni monitorning to'liq kengligi va uzunligiga cho'zadi. Bu CSS uslubida qanday yozilgan? Hammasi oddiy!

fon: url (Rasmlar / Picture.jpg ")

fon o'lchami: 100%; / * bu ko'pchilik zamonaviy brauzerlarda ishlaydi * /

Shunday qilib, biz html -da to'liq ekranli rasm fonini qanday yaratishni bilib oldik. Index.htm fayliga yozish usuli ham mavjud. Bu usul eskirgan bo'lsa -da, yangi boshlanuvchilar buni bilishi va tushunishi zarur. (Head) (style) div (background-size: cover;) (/ style) (/ head) tegida bu yozuv biz fon uchun maxsus blokni tanlaymiz, u butun kenglik bo'ylab joylashadi. deraza Biz veb -sayt fonini yaratishning 2 usulini ko'rib chiqdik html rasm har qanday zamonaviy brauzerda tasvirni ekranning to'liq kengligiga cho'zish.

Ruxsat etilgan fonni qanday qilish kerak

Agar siz rasmni bo'lajak veb -resursning fon sifatida ishlatishga qaror qilsangiz, unda siz uni cho'zilmasligi va estetik ko'rinishini buzmasligi uchun uni harakatsiz qilishni o'rganishingiz kerak. Bu kichik qo'shimchani yordami bilan yozish juda oson. Style.css fayliga fondan keyin bitta iborani qo'shish kerak: url (Rasmlar / Picture.jpg ") tuzatilgan; yoki o'rniga nuqta -vergul qo'yilgandan keyin alohida qator qo'shing - position: fixed. Shunday qilib, sizning fon rasmi harakatsiz bo'lib qoladi. Saytdagi kontentni varaqlaganingizda, matn satrlari siljishini va fon joyida qolishini ko'rasiz. Shunday qilib, siz html -da fon tasvirini bir necha usul bilan yaratishni o'rgandingiz.

HTML -da jadval bilan ishlash

Ko'pgina tajribasiz veb -ishlab chiquvchilar, jadvallar va bloklarga duch kelganda, html -da jadval fonida qanday qilib rasm chizish kerakligini tushunishmaydi. Hamma narsa va CSS uslubi singari, bu veb -dasturlash tili ham juda oddiy. Va bu muammoning echimi bir necha satr kod yozish bo'ladi. Siz imlo haqida bilishingiz kerak jadval qatorlari va ustunlar mos ravishda (tr) va (td) teglar sifatida belgilanadi. Jadvalning fonini tasvir ko'rinishida qilish uchun tegga (jadval), (tr) yoki (td) rasmga havola qo'yilgan oddiy iborani qo'shish kerak: background = rasmning URL manzili. Aniqlik uchun bu erda bir nechta misol.

Fon o'rniga rasmli jadvallar: HTML misollari

Keling, 2x3 jadvalni chizamiz va uni "Tasvirlar" papkasida saqlanadigan fon rasmiga aylantiramiz: (jadval fon = "Tasvirlar/ Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ jadval). Bu bizning jadvalimizni rasmning foniga to'ldiradi.

Keling, bir xil 2x3 plastinka chizamiz, lekin rasmni 1, 4, 5 va 6 raqamli ustunlarga joylashtiring. (Jadval) (tr) (td fon = “Tasvirlar / Picture.jpg”) 1 ( / td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td fon = “Tasvirlar/ Picture.jpg”) 4 (/ td) (td fon = “Tasvirlar/ Picture.jpg”) 5 ( / td) (td fon = "Tasvirlar/ Picture.jpg") 6 (/ td) (/ tr) (/ jadval). Ko'rganimizdan so'ng, biz fon butun jadvalda emas, faqat biz ro'yxatdan o'tgan katakchalarda paydo bo'lishini ko'ramiz.

Brauzerlararo sayt

Brauzerlararo veb-resurs degan narsa ham bor. Bu shuni anglatadiki, sayt sahifalari bir xil darajada to'g'ri ko'rsatiladi har xil turlari va brauzer versiyalari. Shu bilan birga, siz kerakli brauzerlar uchun HTML kod va CSS uslubini sozlashingiz kerak. Bundan tashqari, zamonaviy smartfonlar rivojlanish davrida ko'plab veb -ishlab chiquvchilar moslashtirilgan saytlar yaratishga harakat qilmoqdalar. mobil versiyalari va kompyuter ko'rinishi ostida.

Zamonaviy brauzerlar har bir fon uchun variantlarni vergul bilan ajratib, o'zboshimchalik bilan fon rasmlarini qo'shish imkonini beradi. Umumjahon mulk fonidan foydalanish va uning uchun bitta fonni, ikkinchisini vergul bilan ajratish kifoya.

Qanday qilib fonni derazaning to'liq kengligiga cho'zish mumkin?

Fon o'lchamidagi xususiyat fonni kattalashtirish uchun mo'ljallangan, uning qiymati sifatida 100% ko'rsatiladi, keyin fon brauzer oynasining butun kengligini egallaydi. Brauzerlarning eski versiyalari uchun 1 -misolda ko'rsatilganidek, prefiksli maxsus xususiyatlardan foydalanish kerak.

Veb -sahifaga fon rasmini qanday qo'shish mumkin?

Veb -sahifaga fon tasvirini qo'shish uchun, fon uslubi xususiyatining url qiymati ichidagi tasvirga yo'lni belgilang, u o'z navbatida tanlagichga qo'shiladi.

Animatsion fon yaratish mumkinmi?

Animatsiya - bu har qanday hujjatni hayotga tatbiq eta oladigan etarlicha kuchli texnika, shuning uchun Flash texnologiyasi juda mashhur bo'lib, veb -sahifalarga multfilmlar, interaktivlarga qo'shiladi. GIF grafik formati kadrlarni ketma -ket o'zgartirish orqali asosiy animatsiyani qo'llab -quvvatlaydi. Shunday qilib, ushbu formatdagi rasmdan foydalanib, nafaqat individual tasvirlarni, balki veb -sahifa yoki ma'lum bir elementning fonini ham jonlantirish mumkin.

Birinchidan, siz foydalanishingiz mumkin bo'lgan GIF formatida animatsion rasm yaratishingiz kerak Adobe dasturi Photoshop yoki boshqa maqsadlar uchun mos. Fon rasmi sifatida ishlatilishi mumkin bo'lgan tayyor animatsion fayllar kutubxonalari ham mavjud. Keyinchalik, rasm 1 -misolda ko'rsatilgandek, fon uslubi xususiyati yordamida fon sifatida qo'shiladi.

Sahifaning o'ng pastki burchagiga fon tasvirini qanday qo'yish kerak?

Fon-pozitsiya uslubi xususiyati sahifadagi fon tasvirining o'rnini boshqarish uchun ishlatiladi; u bir vaqtning o'zida tasvirning gorizontal va vertikal koordinatalarini o'rnatadi. Fon tasvirining takrorlanishini bekor qilish uchun, takrorlanmaydigan qiymatli fon-pozitsiya xususiyatidan foydalaning.

Fonning takrorlanishiga qanday yo'l qo'ymaslik kerak?

Odatiy bo'lib, fon rasmi gorizontal va vertikal ravishda takrorlanadi va veb -sahifaning butun maydonida mozaikaga o'raladi. Biroq, fonning bunday xatti-harakatlari har doim ham talab qilinmaydi, ayniqsa bitta rasm joylashganda, shuning uchun fon uslubiga qo'shilgan takrorlanmagan qiymat yordamga keladi.

Qanday qilib fonni faqat vertikal ravishda takrorlash mumkin?

Fonni takrorlash odatda element yoki veb -sahifa oynasining balandligiga mos keladigan dekorativ chiziqlar yoki gradyanlarni yaratish uchun talab qilinadi. Bunday hollarda, fonni vertikal ravishda takrorlash elementlarning kattaligidan qat'i nazar, uzluksiz tasvirni beradi. Faqat boshida, fon tasvirining tikuvsiz takrorlanishidan xavotirlanishingiz kerak.

Oxirgi maqolada biz tegning atributlari yordamida saytdagi fon rangini qanday o'zgartirish haqida gaplashdik tana va CSS uslublari :. Ushbu maqolada biz rasmlarni saytning fon sifatida ishlatilishi, fonni sahifaning to'liq kengligigacha qanday cho'zish va tuzatish haqida gaplashamiz.

Sahifa fonidagi rasm - HTML

Keling, avval atribut yordamida saytga fon tasvirini o'rnatish usulini ko'rib chiqaylik fon teg tana:

Bu erda fon tasviri tana yorlig'ining fon atributi yordamida o'rnatiladi.

Yuqoridagi misolda bo'lgani kabi, rasmga qo'shimcha ravishda, fon rangini belgilash tavsiya etiladi (u sahifani yuklash paytida saytda ko'rsatiladi), u fon tasviri bilan maksimal darajada birlashadi va matn bilan kontrast hosil qiladi. sayt. Masalan, agar siz saytda oq matn rangidan foydalansangiz, siz quyuq fon rangini belgilashingiz va quyuq fon tasvirini o'rnatishingiz kerak. Bunday holda, matnni o'qish oson bo'ladi.

Eslatma: Fon tasvirini va fon rangini HTML ishlatmasdan, lekin bilan o'rnatish tavsiya etiladi CSS yordamida... Bunday holda, kod to'g'ri va to'g'ri bo'ladi.

Sahifa fonidagi rasm - CSS

CSS -da fon rangi va fon tasvirini bitta xususiyat bilan o'rnatish mumkin fon:

Bu erda fon rasmi CSS -ning fon xususiyatidan foydalanib o'rnatiladi.

Bu erda mulkdan foydalanish fon biriktirmasi Sahifaning fonini tuzatish va xususiyatdan foydalanish fon-takrorlash tasvirni gorizontal takrorlanishini o'rnatadi. Ammo shuni ta'kidlash kerakki, fon rasmi qirralarning atrofida yaxshi "tikilgan" bo'lishi kerak.

Agar siz fon rasmini brauzer oynasining to'liq hajmiga cho'zmoqchi bo'lsangiz, xususiyatdan foydalaning fon o'lchami: 100%;

Siz foydalanishingiz mumkin bo'lgan har qanday sayt uchun "Nubex" sayt konstruktorida katta rasm fon sifatida va uni muzlatib qo'ying.

17.10.2015

Hali emas

Hammaga salom!
Biz HTML asoslarini o'rganishda davom etamiz.
Bu darsda men sizga aytib beraman va misollar bilan ko'rsataman fonni qanday qilish kerak HTML -sahifadagi rang yoki rasmdan.
Bu juda oddiy!
Rangdan boshlaylik!
O'ylaymanki, siz buni o'tkazib yubormadingiz, bu erda men sizga matnning rangini qanday o'zgartirish kerakligini aytdim va maqolaning oxirida turli xil ranglar va soyalarning kodlarini berdim. Nega men sizga bu darsni esladim? Ha, chunki u erda stol bor tayyor kodlar ranglar, ularni oling va shu darsda darhol mashq qiling.
Shunday qilib, HTML -da fon rangini qanday qilish kerak ...

HTML fon rasmi

HTML hujjatidagi standart fon rangi oq rangda. Rangni xohlaganingizcha qanday o'rnatasiz?
Bunda bizga "bgcolor" atributi yordam beradi. Fonni bo'yash uchun ushbu atributni "tana" yorlig'iga qo'shing:

Yoki shunga o'xshash:

Bu erda to'liq HTML kod:

Sahifa matni yashil va fon qora bo'ladi.

Natijada shunday bo'ladi:

Agar siz rasmdan fon yaratmoqchi bo'lsangiz, "tana" yorlig'iga "baskground" atributini qo'shing:

Veb -sahifangiz joylashgan har qanday rasmni to'ldiring (masalan, mening sahifam ".gif" kengaytmasi bilan "fon" nomiga ega):

Bu erda to'liq HTML kod:

Natijada shunday bo'ladi:

Agar fon rasmi rasmlar papkasida yoki boshqa papkada joylashgan bo'lsa, u shunday ko'rinadi:

Bu erda to'liq HTML kod:

Chiroyli fonda sahifa matni.

Bugun hammasi shu! O'ylaymanki, dars qiyin bo'lmadi va siz hamma narsani tushunasiz. Agar sizda biron bir savol bo'lsa, sharhlarda yozing.
Sizni keyingi darslarda kutaman.

Oldingi post
Keyingi post