Tarkib

• Qadam bosish
• 4-dan 1-usul: Qattiq fon rangini sozlash
• 4 ning 2-usuli: Rasmni fon sifatida ishlatish
• 4-dan 3-usul: Gradient fonini yarating
• 4-dan 4-usul: Fon rasmi sifatida rangli animatsiyani o'rnating

HTML-da veb-sahifaning orqa fonini o'rnatish uchun faqat "tanasi" elementiga ozgina o'zgartirish kiritishingiz kerak. uslubi> / uslubi> teglar. Bosqichlar sizning devor qog'ozi ko'rinishini xohlaganingizga bog'liq. Veb-saytingizning fonini bir tekis rang, rasm, gradient yoki rangli animatsiya sifatida o'rnatishni o'rganing.

Qadam bosish

4-dan 1-usul: Qattiq fon rangini sozlash

1. O'zingizning sevimli matn muharriringizda HTML-faylingizni oching. HTML5 dan boshlab HTML atributi bgcolor> endi qo'llab-quvvatlanmaydi. Fon rangi, sizning sahifangizning barcha boshqa uslublari singari, CSS bilan o'rnatilishi kerak.
2. Qo'shish uslubi> / uslubi> hujjatingizni belgilaydi. Sizning sahifangiz uchun barcha uslub ma'lumotlari (shu jumladan fon rangi) ushbu teglar ichida kodlangan bo'lishi kerak. Sizda bormi? uslubi> allaqachon ko'rsatilgan teglar, keyin siz faqat faylning ushbu qismiga o'tishingiz mumkin.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Ichida "tanasi" elementini kiriting uslubi> / uslubi> teglar. CSS-dagi "tanasi" elementiga o'zgartiradigan har qanday narsa butun sahifaga ta'sir qiladi.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. "Body" elementiga "background-color" xususiyatini qo'shing. Shu nuqtai nazardan, bitta "rang" imlosi ishlaydi (emas: rang).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. "Fon-rang" orqasida kerakli fon rangini joylashtiring. Endi siz rang nomini ko'rsatishingiz mumkin (yashil, ko'k, tahrirva hokazo), o'n oltinchi (hex) kodlardan foydalaning (masalan, #000000 qora uchun, # ff0000 qizil va boshqalar uchun) yoki rang uchun RGB qiymatini yozib (masalan rgb (255,255,0) sariq uchun). Quyida olti burchakli kodlar bilan misol keltirilgan, bu fonni wikiHow banner bilan bir xil qiladi:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Oq: #FFFFFF
   • Och pushti: # FFCCE6
   • Kuygan Sienna: #993300
   • Indigo - # 4B0082
   • Binafsha - # EE82EE
   • W3schools.com HTML Color Picker-ni tekshiring, xohlagan rangning olti burchakli kodlarini toping.
6. Fon ranglarini boshqa elementlarga qo'llash uchun "fon-rang" dan foydalaning. Tananing elementini o'rnatganingiz kabi, boshqa elementlarning fonlarini ham o'rnatish uchun fon rangidan foydalanishingiz mumkin. Ushbu elementlarni faqat ichida joylashtiring uslubi> / uslubi> fon-rang xususiyati bilan.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {fon rang: to'q sariq; } p {fon rang: rgb (255,0,0); } / style> / head> body> h1> Ushbu sarlavha to'q sariq rangga ega bo'ladi / h1> p> Ushbu paragraf qizil fonga ega bo'ladi / p> / body> / html>

4 ning 2-usuli: Rasmni fon sifatida ishlatish

1. Matn muharririda HTML faylini oching. Ko'p odamlar rasmni veb-sayti uchun fon sifatida ishlatishni afzal ko'rishadi. Shu bilan siz naqsh, to'qima, fotosurat yoki boshqa rasmni fon sifatida o'rnatishingiz mumkin. HTML5-dan barcha fonlarni CSS (Cascading Style Sheets) bilan o'rnatish kerak uslubi> / uslubi> teglar.
2. Qo'shish uslubi> / uslubi> HTML faylingizga teglar. Sizning sahifangiz uchun barcha uslublar ma'lumotlari (shu jumladan fon rangi) ushbu teglar ichida ko'rsatilishi kerak. Sizda allaqachon bor uslubi> teglar o'rnatildi, faylning ushbu qismiga o'ting.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Ichida "tanasi" elementini kiriting uslubi> / uslubi> teglar. CSS-dagi "tanasi" elementiga o'zgartiradigan har qanday narsa butun sahifaga ta'sir qiladi.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. "Badan" elementiga "background-image" xususiyatini qo'shing. Ushbu xususiyatni qo'shganda sizga rasmingizning fayl nomi kerak bo'ladi. Rasm html fayli bilan bir xil papkada saqlanganligiga ishonch hosil qiling (yoki veb-serveringizga faylga to'liq yo'l qo'shing).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); orqa rang: # 93B874; } / style> / head> body> / body> / html>

   • Kodni kiritish yaxshi fikr fon rangi faqat fon rasmi yuklanmasa.
5. Bir nechta rasmlarni qatlamlang. Siz bir nechta rasmlarni bir-birining ustiga qo'yishingiz mumkin. Agar siz shaffof fonga ega bo'lgan rasmlarga ega bo'lsangiz, ular bir-birini to'ldirganda bir-birini to'ldiradi.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); orqa rang: # 93B874; } / style> / head> body> / body> / html>

   • Birinchi rasm tepada. Ikkinchi rasm birinchisining ostidadir.

4-dan 3-usul: Gradient fonini yarating

1. Gradient fonini yaratish uchun CSS-dan foydalaning. Agar siz bir tekis rangdan ko'ra stilize qilingan, ammo rangli animatsiya kabi band bo'lmagan narsani qidirsangiz, gradient fonini ko'ring. Gradientlar - boshqa tengliklarga o'zgarib turadigan ranglar. Gradientingizni yaratish va sozlash uchun siz CSS-dan foydalanishingiz mumkin. Rangli gradient yaratishni boshlashdan oldin, veb-sahifani CSS bilan formatlash asoslari to'g'risida etarli bilimga ega bo'lishingiz kerak.
2. Standart sintaksisni tushunib oling. Gradient yaratishda sizga ikkita ma'lumot kerak bo'ladi: boshlang'ich nuqtasi va boshlang'ich burchagi va ular o'rtasida o'tish sodir bo'ladigan ranglar. Siz bir-biriga mos keladigan bir nechta ranglarni tanlashingiz mumkin va siz gradient uchun yo'nalishni yoki burchakni belgilashingiz mumkin.

   fon: chiziqli-gradient (yo'nalish / burchak, color1, color2, color3 va boshqalar);

3. Vertikal gradient yarating. Agar yo'nalishni ko'rsatmasangiz, rang yuqoridan pastga qarab ishlaydi. Turli xil brauzerlarda gradient funktsiyasining turli xil versiyalari mavjud, shuning uchun kodning turli xil versiyalarini qo'shishingiz kerak bo'ladi.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Bu gradient butun sahifani qamrab olishini ta'minlash uchun talab qilinadi * /} tanasi {fon: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-lineer-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-lineer-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / fon: chiziqli-gradient (# 93B874, # C9DCB9); / * Standart sintaksis (oxirgi bo'lishi kerak) * / background-color: # 93B874; / * Agar gradient yuklamasa, fon rangini belgilash maqsadga muvofiqdir * /} / style> / head> body> / body> / html>

4. Yo'nalish bilan gradient yarating. Gradientga yo'nalishni qo'shish rangning o'zgarishini sozlash imkonini beradi. E'tibor bering, turli xil brauzerlar ko'rsatmalarni turlicha talqin qilishadi. Ularning barchasi bir xil rang gradientini namoyish etadi.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } tanasi {fon: -webkit-lineer-gradient (chapda, # 93B874, # C9DCB9); / * chapdan o'ngga * / fon: -o-lineer-gradient (o'ng, # 93B874, # C9DCB9); / * o'ng tomonda tugaydi * / fon: -moz-lineer-gradient (o'ngda, # 93B874, # C9DCB9); / * o'ng tomonda tugatish * / fon: chiziqli-gradient (o'ngga, # 93B874, # C9DCB9); / * o'ng tomonga o'tadi * / background-color: # 93B874; / * gradient yuklamasligi uchun, fon rangini belgilash maqsadga muvofiqdir * /} / style> / head> body> / body> / html>

5. Gradientni sozlash uchun boshqa xususiyatlardan foydalaning. Gradientlar bilan ko'proq narsani qilishingiz mumkin.
   • Masalan, siz nafaqat ikkitadan ortiq ranglardan foydalanishingiz, balki har birining ortiga foiz qo'yishingiz mumkin. Shu bilan siz har bir rang segmenti qancha joy olishini ko'rsatishingiz mumkin.

     fon: chiziqli-gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Ranglarga shaffoflik qo'shing. Shu bilan siz ranglarni o'chirishingiz mumkin. Rangdan yo'q bo'lib ketishi uchun bir xil rangdan foydalaning. Siz funktsiyani yaxshi ko'rasiz rgba () rangni ko'rsatish uchun foydalanishi kerak. Yakuniy qiymat shaffoflik darajasini belgilaydi: 0 shaffof bo'lmagan va 1 shaffof uchun.

     fon: chiziqli gradyan (o‘ngga, rgba (147,184,116.0), rgba (147,184,116.1));

4-dan 4-usul: Fon rasmi sifatida rangli animatsiyani o'rnating

1. Ga o'ting uslubi> HTML kodingizda. Agar siz qattiq fon rangini topsangiz, ammo topa olmasangiz, o'zgaruvchan rangli fonlarni sinab ko'ring. HTML 5 dan fon ranglari CSS (Cascading Style Sheets) bilan aniqlanishi kerak. Agar siz hech qachon CSS bilan fon rangini o'rnatmagan bo'lsangiz, ushbu usulni sinab ko'rishdan oldin qattiq fon rangini o'rnatish bo'limini o'qing.
2. Mulkni qo'shing animatsiya "tanasi" elementiga. Sizga 2 xil xususiyatni qo'shishingiz kerak bo'ladi, chunki har bir brauzer turli xil kodlarni talab qiladi.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s cheksiz; animatsiya: 60-yillarning rang o'zgarishi cheksiz; } / style> / head> body> / body> / html>

   • -webkit-animatsiya xususiyat Chrome-ga asoslangan brauzerlar (Chrome, Opera, Safari) uchun talab qilinadi. animatsiya boshqa barcha brauzerlar uchun standart hisoblanadi.
   • rang o'zgarishi bu misolda animatsiya deb nomlangan narsa.
   • 60-yillar animatsiya / o'tishning davomiyligi (60 soniya). Buni vebkit uchun ham, standart sintaksis uchun ham o'rnatganingizga ishonch hosil qiling.
   • cheksiz animatsiya cheksiz takrorlanishi kerakligini bildiradi. Agar siz ranglarni aylantirib, so'ngra oxirgi rangda to'xtashni afzal ko'rsangiz, bu qismni qoldirib yuborishingiz mumkin.
3. Animatsiyangizga ranglar qo'shing. Endi fon ranglarini belgilash uchun, shuningdek har bir rangni sahifada qancha vaqt ko'rish mumkinligini belgilash uchun @keyframes qoidasidan foydalanasiz. Shunga qaramay, siz turli xil brauzerlar uchun bir nechta kodlashni qo'shishingiz kerak bo'ladi.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s cheksiz; animatsiya: 60-yillarning rang o'zgarishi cheksiz; } @ -webkit-keyframes rang o'zgarishi {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Ikki satr (@ -webkit-keyframes va @keyframes fon ranglari va foizlari uchun bir xil qiymatlarga ega. Tajriba barcha brauzerlar uchun bir xil bo'lib qolishi uchun u bir xil bo'lib qolishi kerak.
   • Foizlar (0%, 25%va boshqalar) animatsiyaning umumiy davomiyligini anglatadi (60-yillar). Sahifa yuklanganda fon rangga o'rnatiladi 0% va (# 33FFF3). 25% yoki 60 soniya animatsiya o'ynaganida, fonga o'tadi # 78281F, va hokazo.
   • Siz davomiyligini va ranglarini xohlagancha sozlashingiz mumkin.