Qoida sifatida, matnli hujjatlar tekis oq fonda yaratilgan. Ammo, ba'zida hujjatga g'ayrioddiy fon qo'shish kerak bo'ladi. Bu, masalan, siz afisha, buklet, broshyura yoki reklama yaratayotgan bo'lsangiz kerak bo'lishi mumkin.

Yaxshiyamki, ishlab chiquvchilar matn muharriri Word shunga o'xshash vaziyatni oldindan ko'rgan va tegishli funktsiyada qurilgan. Ushbu materialda biz Word-da fon sifatida har qanday rasm, rasm yoki fotosuratni qanday qilish haqida gapiramiz.

Word 2007, 2010, 2013 yoki 2016-yillarda rasmni fon sifatida o'rnatish uchun siz "Sahifa tartibi" yorlig'iga o'tishingiz kerak, u erda "Sahifa rangi" tugmasini bosing va "To'ldirish usullari" opsiyasini tanlang.

Agar siz Word 2003 dan foydalanayotgan bo'lsangiz, buning uchun "Format - Fon - To'ldirish usullari" menyusini ochishingiz kerak.

Shundan so'ng, sahifa fon sozlamalari bilan "To'ldirish usullari" oynasi ochiladi. Ushbu oynada siz "Rasm" yorlig'iga o'tishingiz kerak, u erda "Rasm" tugmasini bosing va paydo bo'lgan oynada hujjatning fonini yaratmoqchi bo'lgan rasmni tanlang.

Kerakli rasm "To'ldirish usullari" oynasida paydo bo'lgandan so'ng, uni "Ok" tugmasi yordamida yopishingiz kerak.

Natijada, siz tanlagan rasm Word hujjatingizning foni sifatida ishlatiladi.

Sahifa fonini loyihalashning boshqa variantlari

Rasmga qo'shimcha ravishda siz hujjat uchun fon sifatida gradient, tekstura yoki naqshdan foydalanishingiz mumkin. Fonni gradient sifatida ishlatish uchun yuqorida aytib o'tilganidek, "To'ldirish usuli" oynasini ochishingiz kerak, "Gradient" yorlig'iga o'ting va u erda tegishli gradient sozlamalarini tanlang. Gradient uchun siz bitta yoki ikkita rangdan foydalanishingiz mumkin yoki tayyor gradientlardan birini ishlatishingiz mumkin.

Teksturani fon sifatida ishlatish uchun siz "Tekstura" yorlig'iga o'tishingiz va taklif qilingan teksturalardan birini tanlashingiz kerak. Siz o'zingizning teksturangizni ham yuklashingiz mumkin. Buning uchun "Boshqa tekstura" tugmasidan foydalaning.

Naqsh yordamida fon yaratish uchun siz "Naqsh" yorlig'iga o'tishingiz, taklif qilingan naqshlardan birini tanlashingiz, shuningdek, naqsh rangini va sahifaning asosiy fonining rangini o'rnatishingiz kerak.

Sahifaning foni sifatida siz bir xil rangdagi to'ldirishdan ham foydalanishingiz mumkin. Buni amalga oshirish uchun siz "Sahifa tartibi" yorlig'idagi "Sahifa rangi" tugmasini bosishingiz va tavsiya etilgan ranglardan birini tanlashingiz kerak.

Va har qanday sahifa fonini olib tashlash uchun siz "Sahifa rangi" tugmasini bosishingiz va "Rangsiz" ni tanlashingiz kerak.

Har qanday veb-saytni o'rnatishda, funksionallikdan tashqari, dizayn juda muhimdir. Bu ma'lum bir kompaniya yoki veb-sayt yaratilayotgan shaxsning o'ziga xos uslubi va dizaynini belgilaydi. Ushbu maqoladagi ko'rsatmalarga rioya qilish orqali fon rangi va tasvirini sozlash oson.

HTML faylingizni Notepad yoki o'zingiz ko'nikkan boshqa matn muharriri yordamida oching. Masalan, minimal matnli ibtidoiy veb-sayt sahifasini olaylik. Faylni istalgan brauzer yordamida ochishingiz mumkin.

Birinchidan, foningiz rangini o'zgartiring, chunki Internetga ulanishi sekin bo'lgan odamlar saytning fon rasmini darhol ko'ra olmaydi. Bir muncha vaqt, rasm yuklanayotganda, ular faqat saytingiz rangini ko'rishlari mumkin bo'ladi.
Tegga kiriting parametr bgcolor=”*****”, bu yerda ***** rang kodi. HTML uchun ranglarni istalganidan topishingiz mumkin grafik muharriri"veb uchun" opsiyasini tanlab yoki https://colorscheme.ru/color-names veb-saytida

Siz shunchaki doira palitrasida rangni tanlashingiz va kvadrat ichida uning intensivligini belgilashingiz kerak. O'ng tomonda siz html uchun ikkita kodni ko'rasiz. Ulardan nusxa ko'chiring va bloknotga joylashtiring.

Rangni tanlab, uni kodga kiritganingizdan so'ng, brauzerdan olingan veb-sahifani ko'rish orqali hamma narsani to'g'ri bajarganingizni tekshiring.

Endi siz fon rasmingizni kiritishni boshlashingiz mumkin. Qulaylik uchun kerakli rasmni kod papkasiga joylashtiring. Unga lotin harflari bilan nom bering.

Endi sichqonchaning o'ng tugmachasini bosib, "Ochish" ni tanlab, kompyuteringizda o'rnatilgan istalgan brauzerni bosish orqali faylning joylashgan joyini bilib oling.

Manzildan nusxa oling qidiruv qatori brauzeringiz.

Endi tegda qatorni kiriting:

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

Faylingizni saqlang.

Veb-sahifangizni tekshiring. Matningiz uchun fon almashtirilganligini ko'rasiz.

E'tibor bering, ekran o'lchamlari yuqori bo'lgan foydalanuvchilar uchun rasmingiz pastga va o'ngga ko'paytiriladi. Rasm monoxromatik bo'lmasa, yaxshi ko'rinmaydi. Ushbu parametrni tuzatish uchun maxsus buyruqlar mavjud.

• fonni takrorlash: "Qiymat". Sizning qiymatingiz uchun variantlar bo'lishi mumkin: "takrorlash-x" - fon rasmingizni gorizontal va vertikal ravishda takrorlaydi. "Repeat-y" - faqat vertikal ravishda takrorlash. "takrorlanmaslik" - tasvir joyida muzlatilgan va takrorlanmaydi. "Bo'sh joy" - butun sahifa rasmning maksimal nusxalari bilan to'ldiriladi, eng tashqi qismi kesiladi. "yumaloq" - bir xil variant, lekin tasvirning qirralari ehtiyotkorlik bilan o'lchanadi;
• fon-ilova: "Qiymat." Agar siz Value so'zi o'rniga "aylantirish" tegini almashtirsangiz, rasm sayt bilan birga aylanadi. "O'zgarmas" - aylantirish paytida fon o'zgarishsiz qoladi;
• fon hajmi: Qiymat Qiymati2. Bu erda qiymatlar piksellarda qiymat olishi kerak. Masalan: 100px 200px. Piksellarga qo'shimcha ravishda foiz qiymatlari qabul qilinadi. Bu sahifani rasm bilan to'ldirish variantidir. Raqamlarga qo'shimcha ravishda siz ikkita parametrni kiritishingiz mumkin: "o'z ichiga oladi" - sahifani uzun tomoni bo'ylab tasvir bilan to'ldiradi va "qopqoq" - sahifani kenglik bo'ylab rasm bilan to'ldiradi.

HTML-da sahifani fon bilan to'ldirish asoslarini bilganingizdan so'ng, siz birinchi veb-saytingizni yaratishga tayyor bo'lasiz.

Oxirgi maqolada biz teg atributlari yordamida veb-saytdagi fon rangini qanday o'zgartirish haqida gaplashdik tanasi va CSS uslublari: . Ushbu maqolada veb-saytda tasvirlarni fon sifatida ishlatish, fonni sahifaning to'liq kengligiga qanday qilib cho'zish va uni tuzatish haqida so'z boradi.

Rasm sahifa foni sifatida - HTML

Keling, avval atribut yordamida saytga fon rasmini qanday o'rnatishni ko'rib chiqaylik fon teg tanasi:

Bu erda fon tasviri tana tegining fon atributidan foydalanib o'rnatiladi.

Yuqoridagi misolda bo'lgani kabi, rasmga qo'shimcha ravishda fon rangini ham belgilash tavsiya etiladi (u sahifa yuklanayotganda saytda ko'rsatiladi), bu fon tasviriga eng mos keladi va matn bilan kontrast hosil qiladi. saytida. Misol uchun, agar siz veb-saytingizda oq matn rangidan foydalansangiz, quyuq fon rangini belgilashingiz va qorong'i fon tasvirini o'rnatishingiz kerak. Bunday holda, matnni o'qish oson bo'ladi.

Eslatma: Fon tasviri va fon rangini HTML-dan emas, balki yordamida o'rnatish tavsiya etiladi CSS yordamida. Bunday holda, kod haqiqiy va to'g'riroq bo'ladi.

Rasm sahifa foni sifatida - CSS

CSS-da fon rangi va fon tasviri bitta xususiyatga o'rnatilishi mumkin fon:

Bu erda fon tasviri fon CSS xususiyati yordamida o'rnatiladi.

Bu erda mulkdan foydalanish fon-ilova sahifa fon sobit, va xususiyatidan foydalanish fon - takrorlash tasvirning gorizontal takrorlanishi o'rnatiladi. Ammo fon tasviri qirralarning atrofida yaxshi "tikilgan" bo'lishi kerakligini hisobga olish kerak.

Agar fon tasvirini brauzer oynasining toʻliq oʻlchamiga choʻzmoqchi boʻlsangiz, xususiyatdan foydalaning fon o'lchami: 100%;

Nubex veb-sayt yaratuvchisida siz har qanday veb-sayt uchun fon sifatida katta rasmdan foydalanishingiz va uni mahkamlashingiz mumkin.

Zamonaviy brauzerlar har bir fonning parametrlarini vergul bilan ajratib ko'rsatib, elementga ixtiyoriy sonli fon tasvirlarini qo'shish imkonini beradi. Universal fon xususiyatidan foydalanish va uning uchun birinchi fonni, ikkinchisini esa vergul bilan ajratib ko'rsatish kifoya.

Fonni oynaning to'liq kengligiga qanday cho'zish mumkin?

Fonni masshtablash uchun background-size xususiyatidan foydalaning; uning qiymatini 100% ga o'rnating, keyin fon brauzer oynasining butun kengligini egallaydi. Brauzerlarning eski versiyalari uchun 1-misolda ko'rsatilganidek, prefikslar bilan maxsus xususiyatlardan foydalanishingiz kerak.

Veb-sahifaga fon rasmini qanday qo'shish mumkin?

Veb-sahifaga fon rasmini qo'shish uchun fon uslubi xususiyatining url qiymatidagi rasmga yo'lni o'rnating, bu esa o'z navbatida tana selektoriga qo'shiladi.

Animatsion fon yaratish mumkinmi?

Animatsiya har qanday hujjatni hayotga tatbiq etishi mumkin bo'lgan juda kuchli texnikadir, shuning uchun veb-sahifalarga multfilmlar va interaktivlarni qo'shadigan Flash texnologiyasi juda mashhur bo'lganligi ajablanarli emas. GIF grafik formati shuningdek, ramkalarni ketma-ket o'zgartirish orqali oddiy animatsiyani qo'llab-quvvatlaydi. Shunday qilib, ushbu formatdagi rasmdan foydalanib, nafaqat alohida rasmlarni, balki veb-sahifa yoki muayyan elementning fonini ham jonlantirish mumkin.

Avval siz jonlantirilgan rasmni yaratishingiz kerak GIF formati dasturdan nima uchun foydalanishingiz mumkin Adobe Photoshop yoki bu maqsad uchun mos keladigan boshqa. Bundan tashqari, fon tasviri sifatida foydalanish mumkin bo'lgan tayyor animatsion fayllar kutubxonalari mavjud. Keyinchalik, rasm 1-misolda ko'rsatilganidek, fon uslubi xususiyatidan foydalangan holda fon sifatida qo'shiladi.

Sahifaning pastki o'ng burchagiga fon rasmini qanday qo'yish mumkin?

Sahifadagi fon tasvirining o'rnini boshqarish uchun fon-pozitsiya uslubi xususiyatidan foydalaniladi, u bir vaqtning o'zida tasvirning gorizontal va vertikal koordinatalarini o'rnatadi. Fon tasvirini takrorlashni bekor qilish uchun no-repeat qiymati bilan background-position xususiyatidan foydalaning.

Fon takrorlanishini qanday oldini olishim mumkin?

Odatiy bo'lib, fon tasviri gorizontal va vertikal ravishda takrorlanadi va veb-sahifaning butun maydoni bo'ylab mozaika hosil qiladi. Biroq, bu fon harakati har doim ham talab qilinmaydi, ayniqsa bitta rasmni joylashtirishda, shuning uchun fon uslubi xususiyatiga takrorlanmaydigan qiymat qo'shish yordam beradi.

Qanday qilib fonni faqat vertikal ravishda takrorlashim mumkin?

Fonni takrorlash odatda veb-sahifa elementi yoki oynasi balandligiga bog'langan dekorativ chiziqlar yoki gradientlarni yaratish uchun talab qilinadi. Bunday hollarda, fonni vertikal ravishda takrorlash, elementlarning o'lchamidan qat'i nazar, izchil rasmni ta'minlaydi. Faqat dastlab fon tasviri tikuvlarsiz takrorlanishiga ishonch hosil qilishingiz kerak.

Har qanday xona, agar uning qavati qimmatbaho fors gilami bilan qoplangan bo'lsa, ancha yaxshi ko'rinadi. Xo'sh, nima uchun veb-saytingiz yomonroq? Ehtimol, uning qavatini qimmatbaho, oqlangan qo'lda ishlangan gilam bilan "qoplash" vaqti keldi. Keling, veb-sayt uchun qanday fon yaratishni batafsil ko'rib chiqaylik:

Sayt uchun fon

Shunday bo'ladi eski dizayn Men allaqachon saytdan charchadim. Va men yangi va mazali narsani xohlayman. A yangi dizayn o'z qo'lingiz bilan pishirsangiz shunday bo'ladi.

Ammo resursning butun dizaynini o'zingiz butunlay o'zgartirish - bu minnatdorchiliksiz ish. Va har bir kishining qo'llari bu vazifa uchun to'g'ri o'qitilmagan. Shuning uchun, eski shablonni yangilashning eng oson yo'li resursning fon rangini yoki uning fon tasvirini o'zgartirishdir.

Veb-saytdagi fonni o'zgartirishning bir necha yo'li mavjud. Buning uchun CSS yoki html imkoniyatlaridan foydalaniladi. Ammo fon bilan ishlashning ko'pgina xususiyatlari ushbu veb-texnologiyalarda bir xil nom va qo'llash usuliga ega.

Html da fon bilan ishlash asoslari

Fon sifatida bir nechta elementlardan foydalanish mumkin:

• Rang;
• Fon rasmi;
• Teksturali tasvir.

Keling, ularning har biridan foydalanishni batafsil ko'rib chiqaylik.

Sayt uchun fon rangini belgilash uchun uslub atributining fon rangi xususiyatidan foydalaning. Ya'ni, veb-sahifaning asosiy rangini belgilash uchun uni teg ichiga yozish kerak . Masalan:

Veb-sayt foni #55D52B

O'n oltilik rang kodiga qo'shimcha ravishda kalit so'z yoki RGB formatidagi qiymat qo'llab-quvvatlanadi. Misollar:

Veb-sayt foni rgb(23,113,44)

Veb-sayt foni yashil

yordamida fon rangini o'rnating kalit so'zlar boshqa ikki usul bilan solishtirganda bir qator cheklovlarga ega.

HTML ranglarni o'rnatish 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 sayti uchun fonni o'rnatish uchun o'n oltilik yoki RGB formatidan foydalanish yaxshiroqdir.

Rang tanlashdan tashqari, boshqa moslashtirish imkoniyatlari ham mavjud. Agar fon rangi xususiyati shaffof ga o'rnatilgan bo'lsa, sahifaning foni shaffof bo'ladi. Ushbu qiymat sukut bo'yicha ushbu xususiyatga tayinlangan.

Endi sayt uchun fon tasvirini o'rnatish uchun gipermatn tilining imkoniyatlarini ko'rib chiqamiz. Buni background-image xususiyati yordamida amalga oshirish mumkin.

Koddan ko'rinib turibdiki, rasm qavs ichida ko'rsatilgan url yo'li orqali bog'langan. Ammo hamma rasmlar shunchalik katta emaski, ularning o'lchamlari butun ekran maydonini to'ldiradi. Keling, kichikroq rasm qanday ko'rinishini ko'rib chiqaylik.

Aytaylik, biz she'riyat haqida veb-sayt ishlab chiqyapmiz va biz Pegasus tasviridan fon sifatida foydalanishimiz kerak. Qanotli ot shoirning ijodiy fikr erkinligini ifodalaydi!

Tasvirni ekranning o'rtasida bir marta ko'rsatishimiz kerak. Ammo, afsuski, brauzer bizning yuksak istaklarimizni tushunmaydi. Va u saytning fonida ekran maydoni sig'ishi mumkin bo'lgan ko'p marta kichikroq tasvirni ko'rsatadi:

Ehtimol, qanotli to'rtta jilmaygan ot shoirlar uchun juda ko'p ilhom manbai bo'ladi. Shuning uchun biz Pegasusimizni klonlashni taqiqlaymiz. Buni fonni takrorlash xususiyatidan foydalanib qilamiz. Mumkin qiymatlar:

• takrorlash-x - fon tasvirini gorizontal ravishda takrorlash;
• takrorlash-y - vertikal;
• takrorlash - ikkala o'qda;
• takrorlash yo'q - takrorlash taqiqlanadi.

Ro'yxatda keltirilgan variantlar orasida bizni oxirgisi qiziqtiradi. Saytning fonini o'zgartirishdan oldin biz uni kodimizda ishlatamiz:

Lekin, albatta, bizning flayerimiz ekranning o'rtasida joylashgan bo'lsa yaxshi bo'lardi. Fon-pozitsiya xususiyati aniq sahifadagi fon tasvirini joylashtirish uchun mo'ljallangan. Joylashuv koordinatalarini bir necha usul bilan o'rnatishingiz mumkin:

• Kalit so'z ( yuqori, pastki, markaz, chap, o'ng);
• Foiz - hisoblash yuqori chap burchakdan boshlanadi;
• O'lchov birliklarida (piksellarda).

Keling, eng oddiy markazlashtirish variantidan foydalanamiz:

O'tkazish paytida siz rasmning o'rnini tuzatishingiz kerak bo'ladi. Shuning uchun, saytning fonida tasvirni yaratishdan oldin, maxsus xususiyatdan foydalaning fon-ilova . U qabul qiladigan qiymatlar:

• aylantirish;


• belgilangan.

Bizga oxirgi qiymat kerak. Endi bizning misol kodimiz quyidagicha ko'rinadi:

Veb-sayt tekstura fon

Birinchi misolda biz fon uchun katta va chiroyli cho'l landshaftidan foydalanganmiz. Ammo bunday go'zallik uchun siz to'liq to'lashingiz kerak. Tasvirning og'irligi yuqori sifatli, bir necha megabaytga yetishi mumkin.

Ushbu hajm hech qanday tarzda yuqori tezlikdagi Internetga ulangan brauzerning sahifani yuklash tezligiga ta'sir qilmaydi. Lekin nima haqida mobil internet, bir necha "metrlarni" yuklash uchun uzoq vaqt kerak bo'ladi?

Bu muammolarning barchasi teksturali fon yordamida hal qilinadi. U tekstura namunasi sifatida kichik tasvirdan foydalanadi. Ko'p marta takrorlangan bo'lsa ham, chizma faqat bir marta yuklanadi.