Background, Gradient orqa fonga rasm qoyish, rang qo’shish

Mavzu: Background, Gradient   orqa fonga rasm qoyish, rang                                                 qo’shish

               Reja:

1.Background-position - fonning joylashuvi

2.Fon rasmlari haqida.

3. Fon yaratish uchun asosiy HTML teglari

4. HTML rangi elementlari

Background-position - fonning joylashuvi

Endi savol tug'iladi, fon tasvirini elementning o'lchamini cheklaydigan maydonning yuqori chap burchagidan uzoqlashtirish mumkinmi? Albatta, mumkin va buning uchun alohida qoida mavjud fon holati:

CSS spetsifikatsiyasiga nazar tashlasak, nega standart fon tasviri Html element maydonining yuqori chap chetiga bosilganligi aniq bo'ladi. Chunki "0% 0%" qiymati fon pozitsiyasi qoidasi uchun standart hisoblanadi.

Xo'sh, agar ushbu qoida element uchun aniq belgilanmagan bo'lsa (bizning holatimizda bo'lgani kabi), brauzer standart spetsifikatsiyada qabul qilingan qiymatini tanlaydi (esda tutaman CSS-dagi koordinata o'qlari faqat yuqori chap chetidan xabar qilinadi. maydon elementi).

Shuningdek, spetsifikatsiyadan ko'rinib turibdiki, nisbiy (foiz) va mutlaq qiymatlar (masalan, ) fon rasmini fon pozitsiyasidan foydalangan holda joylashtirish uchun ishlatilishi mumkin. Xo'sh, siz ma'lum raqamli qiymatlarga mos keladigan so'zlardan ham foydalanishingiz mumkin. Lekin birinchi narsa birinchi.

Fon tasvirining o'rnini o'rnatishda mutlaq birliklardan foydalanish fon pozitsiyasi o'zining yakuniy pozitsiyasini aniqlash uchun quyidagi printsipga ega:

Fon rasmi

Har qanday mos rasm fon sifatida ishlatilishi mumkin. Fon e'tiborni matndan chalg'itmasligi kerak, shu bilan birga u veb-sahifaning rang sxemasi bilan yaxshi uyg'unlashishi va tez yuklanishi uchun kichik hajmda bo'lishi kerak. Yuqoridagilardan keyin siz hali ham sahifaga fon rasmini qo'shmoqchi bo'lsangiz, tegning fon atributidan foydalaning .

Agar tasvir monitor ekranining o'lchamidan kichik bo'lsa, u gorizontal va vertikal ravishda ko'paytiriladi.

Fon rasmi fon rangiga qaraganda sekinroq yuklanganligi sababli, tasvirlar yuklanmaguncha matn bir muncha vaqt o'qilmasligi mumkin. Brauzerda tasvirlar o'chirilgan bo'lsa, xuddi shunday bo'lishi mumkin. Shuning uchun har doim fon rangini fon tasviri bilan birga o'rnatish tavsiya etiladi (3-misol).

Ruxsat etilgan fon

Odatiy bo'lib, aylantirish panelidan foydalanganda fon tasviri veb-sahifa mazmuni bilan birga harakatlanadi. Internet Explorer fonni bgproperties = "fiksatsiyalangan" teg yordamida tuzatishga imkon beradi .

4-misolda ko'rsatilganidek, bgproperties atributini belgilash orqali veb-sahifadagi fon tasviri statsionar bo'lib qoladi, lekin matn, grafik va boshqa elementlar aylantirish paneli bilan harakatlanadi.

Veb-sayt yaratish uchun html-da fonni qanday qilish muhim savol. Ushbu protsedura ma'lum teglardan foydalanishni o'z ichiga oladi - kodli so'zlar va harflar. Ularga rahmat, siz boshqa fonni qo'yishingiz, uni monoxromatik qilishingiz mumkin - uni to'ldirishingiz yoki fon o'rniga istalgan rasmni qo'yishingiz mumkin. Bunday harakatlar barcha maket dizaynerlari va o'z saytlarini mustaqil ravishda "kiyinishga" qaror qilganlar uchun juda foydali bo'ladi.

Fon yaratish

Html sayti fonini yaratishdan oldin matn muharririda sahifaning html kodini ochishingiz kerak. Yodda tutingki, teglar sahifada vertikal ravishda joylashtiriladi. Keyin, teglar orasida … , teg qo'yishingiz kerak- bu teglar ushbu veb-sahifa elementlarining uslubini aniqlashtirish uchun kerak. Uch nuqta o'rniga siz yozishingiz kerak - tana (fon :). Bu sahifaning fonida turli uslublarni o'rnatishingiz mumkin bo'lgan variant. Rangni sozlash operatsiyasini ikki usulda bajarishingiz mumkin. Birinchisi:

Tana (fon: # 000000) - endi sahifaning foni qora bo'lishi kerak.

Bu usul rangni ham, rasmni ham fon sifatida o'rnatish uchun javob beradi. Yo'g'on nuqtadan keyin siz rang kodini yoki rasmga havolani qo'yishingiz mumkin. Va siz faqat rangni belgilashni anglatadigan usuldan foydalanishingiz mumkin - sahifa uchun ma'lum bir to'ldirish. Ikki nuqtadan keyin siz parametr deb ataladigan rangni yozishingiz kerak. Va undan keyin rangning kodini o'zi qo'ying. Bu uni shablon sifatida ishlatishning yaxshi usuli. Uni ro'yxatdan o'tkazing va saqlang va kerak bo'lganda - rangni o'rnating, sahifaga qo'ying.

Oddiy fon o'rniga rasmni qo'yishingiz mumkin. Agar siz bilishingiz kerak bo'lsa: html-da, qanday qilib rasmni fon qilish kerak, unda operatsiyalarni shunga o'xshash bajarish kerak. Teglarni ro'yxatdan o'tkazing, tanani qo'ying (fon: rasmga havola). Shuni esda tutish kerakki, rasmning o'zi har qanday joyda bo'lishi mumkin. Va Internetdagi saytda, lekin hujjatning ildizida papka yaratish eng yaxshisidir. Sayt sahifasi haqidagi barcha ma'lumotlar saqlanadigan papkada siz boshqasini yaratishingiz kerak - rasmlar uchun. Operatsiya quyidagicha ko'rinadi:

Endi siz tanlagan rasm saytning butun sahifasining foni bo'ladi. Umid qilamizki, siz html-da qanday fon yaratishni tushundingiz. Faqat sinab ko'ring va siz albatta muvaffaqiyat qozonasiz!

Veb-sayt yaratishning mohiyatini endigina o'rganayotgan ko'plab boshlang'ich maket dizaynerlari ko'pincha html-da fon tasvirini qanday yaratish haqida hayron bo'lishadi. Va agar kimdir bu vazifani aniqlay olsa, tasvirni monitorning to'liq kengligiga cho'zish paytida bir xil muammolar paydo bo'ladi. Shu bilan birga, sayt barcha brauzerlarda bir xil ko'rsatilishini istardim, shuning uchun o'zaro faoliyat brauzer talabi bajarilishi kerak. Siz fonni ikki xil usulda o'rnatishingiz mumkin: foydalanish va CSS uslubi. Har kim o'zi uchun eng yaxshi variantni tanlaydi. Albatta, CSS uslubi ancha qulayroq, chunki uning kodi alohida faylda saqlanadi va saytning asosiy teglarida qo'shimcha ustunlarni egallamaydi, lekin birinchi navbatda, rasmni fonda o'rnatishning oddiy usulini ko'rib chiqaylik. sayt.

Fon yaratish uchun asosiy HTML teglari

Shunday qilib, savolga o'tamiz, html-dagi fon to'liq ekrandir. Sayt chiroyli ko'rinishi uchun siz juda muhim tafsilotni tushunishingiz kerak: siz shunchaki gradient fon yaratishingiz yoki uni tekis rang bilan bo'yashingiz kerak, lekin agar siz fonga rasm qo'shishingiz kerak bo'lsa, u cho'zilmaydi. monitorning to'liq kengligiga. Dastlab, siz bunday kengaytma bilan rasmni tanlashingiz yoki dizaynni o'zingiz qilishingiz kerak, unda siz sayt sahifasini ko'rsatasiz. Faqat fon tasviri tayyor bo'lgandan keyin uni "Rasmlar" deb nomlangan papkaga o'tkazing. Unda biz barcha ishlatilgan rasmlar, animatsiyalar va boshqa grafik fayllarni saqlaymiz. Ushbu papka barcha html fayllaringiz bilan ildiz katalogida bo'lishi kerak. Endi siz kodga o'tishingiz mumkin. Kod yozishning bir nechta variantlari mavjud, ular yordamida fon rasmga aylanadi.