Saturs

• Lai soli
• 1. metode no 4: cietas fona krāsas iestatīšana
• 2. metode no 4: Attēla izmantošana kā fons
• 3. metode no 4: izveidojiet gradienta fonu
• 4. metode no 4: iestatiet krāsu animāciju kā fonu

Lai varētu iestatīt tīmekļa lapas fonu HTML formātā, jums vienkārši jāveic nelielas izmaiņas elementā "body". stils> / stils> tagus. Darbības ir atkarīgas no tā, kā vēlaties, lai fons izskatās. Uzziniet, kā iestatīt savas vietnes fonu kā vienkrāsainu, attēlu, gradientu vai krāsu animāciju.

Lai soli

1. metode no 4: cietas fona krāsas iestatīšana

1. Atveriet savu HTML failu iecienītākajā teksta redaktorā. Sākot ar HTML5, HTML atribūts bgcolor> vairs netiek atbalstīts. Fona krāsa, tāpat kā visi pārējie lapas stila aspekti, jāiestata ar CSS.
2. Pievienojiet stils> / stils> atzīmē jūsu dokumentu. Visi jūsu lapas stila dati (ieskaitot fona krāsu) ir kodējami šajos tagos. Vai jums ir stils> tagi, kas jau ir norādīti, tad varat vienkārši ritināt līdz faila daļai.

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

3. Ierakstiet elementa "body" iekšpusē stils> / stils> tagus. Viss, ko CSS maināt uz “body” elementu, ietekmēs visu lapu.

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

4. Pievienojiet elementam "body" rekvizītu "background-color". Šajā kontekstā darbosies tikai viena “krāsas” pareizrakstība (nevis krāsa).

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

5. Novietojiet vēlamo fona krāsu aiz fona krāsas. Tagad jūs varat norādīt krāsas nosaukumu (zaļa, zils, edutt.), izmantojiet heksadecimālos (heks) kodus (piem., #000000 melnai, # ff0000 sarkanai krāsai utt.) vai ierakstot krāsas RGB vērtību (piemēram, rgb (255 255,0) dzeltenai krāsai). Tālāk ir sniegts piemērs ar heksadeximal kodiem, padarot fonu tādu pašu kā wikiHow reklāmkarogu:

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

   • Balts: #FFFFFF
   • Gaiši rozā: # FFCCE6
   • Sadedzinātā Sienna: #993300
   • Indigo - # 4B0082
   • Violets - # EE82EE
   • Pārbaudiet w3schools.com HTML krāsu atlasītāju, lai atrastu jebkuras vēlamās krāsas sešstūra kodus.
6. Izmantojiet "fona krāsa", lai fona krāsas lietotu citiem elementiem. Tāpat kā iestatāt ķermeņa elementu, varat izmantot fona krāsu, lai iestatītu citu elementu fonus. Vienkārši ievietojiet šos elementus stils> / stils> ar fona krāsas īpašību.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {fona krāsa: oranža; } p {fona krāsa: rgb (255,0,0); } / style> / head> body> h1> Šī galvene iegūst oranžu fonu / h1> p> Šī rindkopa iegūst sarkanu fonu / p> / body> / html>

2. metode no 4: Attēla izmantošana kā fons

1. Atveriet HTML failu teksta redaktorā. Daudzi cilvēki izvēlas attēlu izmantot kā fonu savai vietnei. Ar to jūs varat iestatīt rakstu, faktūru, fotoattēlu vai jebkuru citu attēlu kā fonu. Sākot ar HTML5, visi foni ir jāiestata ar CSS (kaskādes stila lapas) stils> / stils> tagus.
2. Pievienojiet stils> / stils> tagus jūsu HTML failā. Šajos tagos jānorāda visi jūsu lapas stila dati (ieskaitot fona krāsu). Vai jūs jau esat stils> tagi ir iestatīti, ritiniet līdz faila daļai.

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

3. Ierakstiet elementa "body" iekšpusē stils> / stils> tagus. Viss, ko CSS mainīsit uz “body”, ietekmēs visu lapu.

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

4. Pievienojiet elementam "body" rekvizītu "background-image". Pievienojot šo īpašumu, jums būs nepieciešams attēla faila nosaukums. Pārliecinieties, vai attēls ir saglabāts tajā pašā mapē, kur ir HTML fails (vai pievienojiet pilnu faila ceļu savam tīmekļa serverim).

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

   • Ieteicams iekļaut kodu fona krāsa tikai gadījumā, ja fona attēls netiks ielādēts.
5. Slāņojiet vairākus attēlus. Varat sakraut vairākus attēlus viens uz otra. Tas var būt noderīgi, ja jums ir attēli ar caurspīdīgu fonu, kas viens otru papildina, uzklājot tos.

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

   • Pirmais attēls ir augšpusē. Otrais attēls ir zem pirmā.

3. metode no 4: izveidojiet gradienta fonu

1. Izmantojiet CSS, lai izveidotu gradienta fonu. Ja meklējat kaut ko mazliet stilizētāku par vienkrāsainu, bet ne tik aizņemtu kā krāsu animācija, izmēģiniet gradienta fonu. Gradienti ir krāsas, kas mainās uz citām vienādībām. Lai izveidotu un pielāgotu gradientu, varat izmantot CSS. Pirms sākat veidot krāsu gradientu, jums vajadzētu iegūt pietiekamas zināšanas par tīmekļa lapas formatēšanas ar CSS pamatiem.
2. Izprot standarta sintaksi. Veidojot gradientu, jums būs nepieciešami divi informācijas elementi: sākuma punkts un sākuma leņķis, kā arī krāsas, starp kurām notiks pāreja. Jūs varat izvēlēties vairākas krāsas, kas visas pārklājas, un jūs varat norādīt gradienta virzienu vai leņķi.

   fons: lineārs-gradients (virziens / leņķis, krāsa1, krāsa2, krāsa3 utt.);

3. Izveidojiet vertikālu gradientu. Ja nenorādīsit virzienu, krāsa darbosies no augšas uz leju. Dažādās pārlūkprogrammās ir dažādas gradienta funkcijas versijas, tāpēc jums būs jāpievieno dažādas koda versijas.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Tas ir nepieciešams, lai nodrošinātu, ka gradients aptver visu lapu * /} pamattekstu {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-lineārs-gradients (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: lineārs-gradients (# 93B874, # C9DCB9); / * Noklusējuma sintakse (jābūt pēdējai) * / background-color: # 93B874; / * Ieteicams iestatīt fona krāsu, ja gradients netiek ielādēts * /} / style> / head> body> / body> / html>

4. Izveidojiet gradientu ar virzienu. Virziena pievienošana gradientam ļauj pielāgot krāsu maiņas veidu. Ņemiet vērā, ka dažādas pārlūkprogrammas norādes interpretēs atšķirīgi. Viņiem visiem būs vienāds krāsu gradients.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {background: -webkit-linear-gradient (pa kreisi, # 93B874, # C9DCB9); / * no kreisās uz labo * / fons: -o-lineārs-gradients (pa labi, # 93B874, # C9DCB9); / * beigas pa labi * / background: -moz-linear-gradient (pa labi, # 93B874, # C9DCB9); / * beigas pa labi * / fons: lineārs-gradients (pa labi, # 93B874, # C9DCB9); / * pārvietojas uz labo pusi * / background-color: # 93B874; / * ieteicams iestatīt fona krāsu, ja gradients netiks ielādēts * /} / style> / head> body> / body> / html>

5. Izmantojiet citas īpašības, lai pielāgotu gradientu. Izmantojot gradientus, jūs varat izdarīt daudz vairāk.
   • Piemēram, jūs varat izmantot ne tikai vairāk nekā divas krāsas, bet arī ievietot procentus aiz katras. Ar to jūs varat norādīt, cik daudz vietas iegūs katrs krāsu segments.

     fons: lineārs-gradients (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Pievienojiet krāsām caurspīdīgumu. Ar to jūs varat izbalināt krāsas. Izmantojiet to pašu krāsu, lai izbalinātu no krāsas uz neko. Jums patiks funkcija rgba () jāizmanto, lai norādītu krāsu. Galīgā vērtība nosaka pārredzamības pakāpi: 0 par necaurspīdīgu un 1 par caurspīdīgu.

     fons: lineārs gradients (pa labi, rgba (147,184,116,0), rgba (147,184,116,1));

4. metode no 4: iestatiet krāsu animāciju kā fonu

1. Virzieties uz stils> HTML kodā. Ja atrodat vienkrāsainu fona krāsu, bet nē, eksperimentējiet ar krāsu fonu maiņu. No HTML 5 fona krāsas jānosaka ar CSS (kaskādes stila lapas). Ja jūs nekad neesat iestatījis fona krāsu, izmantojot CSS, pirms šīs metodes izmēģināšanas izlasiet sadaļu par cietas fona krāsas iestatīšanu.
2. Pievienojiet īpašumu animācija uz "ķermeņa" elementu. Jums būs jāpievieno 2 dažādi rekvizīti, jo katram pārlūkam ir nepieciešams atšķirīgs kods.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animācija: krāsu maiņa 60. gadu bezgalīgā; } / style> / head> body> / body> / html>

   • -webkit-animācija īpašums ir nepieciešams pārlūkiem, kuru pamatā ir Chrome (Chrome, Opera, Safari). animācija ir visu pārējo pārlūkprogrammu standarts.
   • krāsas maiņa ir tas, ko šajā piemērā sauc par animāciju.
   • 60. gadi ir animācijas / pārejas ilgums (60 sekundes). Noteikti iestatiet to gan tīmekļa komplektam, gan noklusējuma sintaksei.
   • bezgalīgs norāda, ka animācija jāatkārto bezgalīgi. Ja vēlaties izvēlēties krāsas un pēc tam apstāties pie pēdējās krāsas, varat izlaist šo daļu.
3. Pievienojiet animācijai krāsas. Tagad jūs izmantosiet likumu @ keyframes, lai iestatītu fona krāsas, kurām jāiziet cauri, kā arī to, cik ilgi katra krāsa ir redzama lapā. Atkal jums būs jāpievieno vairāki kodējumi dažādiem pārlūkiem.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animācija: krāsu maiņa 60. gadu bezgalīgā; } @ -webkit-keyframes colorchange {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>

   • Ņemiet vērā, ka abas līnijas (@ -webkit-keyframes un @ keyframes ir vienādas fona krāsu un procentuālās vērtības. Tam vajadzētu palikt vienveidīgam, lai pieredze visiem pārlūkiem paliktu nemainīga.
   • Procenti (0%, 25%utt.) atspoguļo animācijas kopējo ilgumu (60. gadi). Kad lapa tiks ielādēta, fona krāsa būs iestatīta uz 0% un (# 33FFF3). Kad animācija ir atskaņota 25% vai 60 sekundes, fons pāriet uz # 78281F, un tā tālāk.
   • Pēc vēlēšanās var pielāgot ilgumu un krāsas.