Conţinut

• A calca
• Metoda 1 din 4: Setarea unei culori de fundal solide
• Metoda 2 din 4: Folosirea unei imagini ca fundal
• Metoda 3 din 4: Creați un fundal de gradient
• Metoda 4 din 4: setați o animație color ca fundal

Pentru a putea seta fundalul unei pagini web în HTML, trebuie doar să faceți o mică modificare a elementului „corp” din stil> / stil> Etichete. Pașii depind de modul în care doriți să arate imaginea de fundal. Aflați cum să setați fundalul site-ului dvs. web ca o culoare solidă, imagine, gradient sau animație color.

A calca

Metoda 1 din 4: Setarea unei culori de fundal solide

1. Deschideți fișierul HTML în editorul de text preferat. Începând cu HTML5, atributul HTML bgcolor> nu mai este acceptat. Culoarea de fundal, la fel ca toate celelalte aspecte de stil ale paginii dvs., trebuie setată cu CSS.
2. Adaugă stil> / stil> etichetează documentul dvs. Toate datele de stil pentru pagina dvs. (inclusiv culoarea de fundal) ar trebui să fie codificate în aceste etichete. Aveți stil> etichete deja indicate, atunci puteți derula doar la acea parte a fișierului.

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

3. Tastați elementul "corp" din interiorul stil> / stil> Etichete. Orice lucru pe care îl modificați în elementul „corp” din CSS va afecta întreaga pagină.

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

4. Adăugați proprietatea „background-color” la elementul „body”. În acest context, va funcționa o singură ortografie de „culoare” (nu: culoare).

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

5. Plasați culoarea de fundal dorită în spatele „background-color”. Acum puteți indica numele unei culori (verde, albastru, edetc.), utilizați coduri hexazecimale (hex) (ex. #000000 pentru negru, # ff0000 pentru roșu etc.) sau prin introducerea valorii RGB pentru culoare (cum ar fi rgb (255.255,0) pentru galben). Mai jos este un exemplu cu coduri hexadeximale, care face ca fundalul să fie același cu bannerul wikiHow:

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

   • Alb: #FFFFFF
   • Roz deschis: # FFCCE6
   • Siena arsă: #993300
   • Indigo - # 4B0082
   • Violet - # EE82EE
   • Consultați w3schools.com HTML Color Picker pentru a găsi codurile hexagonale ale oricărei culori dorite.
6. Utilizați „fundal-culoare” pentru a aplica culorile de fundal altor elemente. La fel cum ați setat elementul corpului, puteți utiliza culoarea fundalului pentru a seta fundalurile altor elemente. Plasați acele elemente în stil> / stil> cu proprietatea de culoare de fundal.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {fundal-culoare: portocaliu; } p {fundal-culoare: rgb (255,0,0); } / style> / head> body> h1> Acest antet primește un fundal portocaliu / h1> p> Acest paragraf primește un fundal roșu / p> / body> / html>

Metoda 2 din 4: Folosirea unei imagini ca fundal

1. Deschideți fișierul HTML într-un editor de text. Mulți oameni preferă să utilizeze o imagine ca fundal pentru site-ul lor web. Cu aceasta puteți seta un model, textură, fotografie sau orice altă imagine ca fundal. Din HTML5, toate fundalurile trebuie setate cu CSS (Cascading Style Sheets) în cadrul stil> / stil> Etichete.
2. Adaugă stil> / stil> etichete în fișierul dvs. HTML. Toate datele de stil pentru pagina dvs. (inclusiv culoarea de fundal) ar trebui indicate în aceste etichete. Ai facut deja stil> etichete setate, derulați până la acea parte a fișierului.

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

3. Tastați elementul "corp" din interiorul stil> / stil> Etichete. Orice lucru pe care îl modificați în elementul „corp” din CSS va afecta întreaga pagină.

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

4. Adăugați proprietatea „background-image” la elementul „body”. La adăugarea acestei proprietăți veți avea nevoie de numele fișierului imaginii dvs. Asigurați-vă că imaginea este salvată în același folder cu fișierul html (sau adăugați calea completă a fișierului pe serverul dvs. web).

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

   • Este o idee bună să includeți codul culoare de fundal doar în cazul în care imaginea de fundal nu se va încărca.
5. Stratează mai multe imagini. Puteți stiva mai multe imagini una peste alta. Acest lucru poate fi util dacă aveți imagini cu fundal transparent care se completează reciproc atunci când sunt suprapuse.

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

   • Prima imagine este deasupra. A doua imagine este sub prima.

Metoda 3 din 4: Creați un fundal de gradient

1. Utilizați CSS pentru a crea un fundal de gradient. Dacă căutați ceva puțin mai stilizat decât o culoare solidă, dar nu la fel de ocupat ca o animație color, încercați un fundal degradat. Gradientele sunt culori care se schimbă la alte egalități. Puteți utiliza CSS pentru a crea și a ajusta gradientul. Înainte de a începe să creați un gradient de culoare, ar trebui să obțineți cunoștințe suficiente despre elementele de bază ale formatării unei pagini web cu CSS.
2. Înțelegeți sintaxa standard. Când creați un gradient, există două informații de care veți avea nevoie: punctul de pornire și unghiul de pornire și culorile între care va avea loc tranziția. Puteți selecta mai multe culori care se suprapun și puteți specifica o direcție sau un unghi pentru gradient.

   fundal: liniar-gradient (direcție / unghi, culoare1, culoare2, culoare3 etc.);

3. Creați un gradient vertical. Dacă nu indicați o direcție, culoarea va rula de sus în jos. Browsere diferite au versiuni diferite ale funcției gradient, deci va trebui să adăugați diferite versiuni ale codului.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Acest lucru este necesar pentru a vă asigura că gradientul se întinde pe întreaga pagină * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / fundal: gradient liniar (# 93B874, # C9DCB9); / * Sintaxa implicită (trebuie să fie ultima) * / background-color: # 93B874; / * Este o idee bună să setați o culoare de fundal, în cazul în care gradientul nu se încarcă * /} / style> / head> body> / body> / html>

4. Creați un gradient cu o direcție. Adăugarea unei direcții la gradient vă permite să reglați modul în care se schimbă culoarea. Rețineți că diferite browsere vor interpreta direcțiile în mod diferit. Toate vor afișa același gradient de culoare.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } corp {fundal: -webkit-linear-gradient (stânga, # 93B874, # C9DCB9); / * de la stânga la dreapta * / background: -o-linear-gradient (dreapta, # 93B874, # C9DCB9); / * sfârșitul din dreapta * / fundal: -moz-gradient-liniar (dreapta, # 93B874, # C9DCB9); / * sfârșitul din dreapta * / fundal: gradient liniar (spre dreapta, # 93B874, # C9DCB9); / * se deplasează în partea dreaptă * / background-color: # 93B874; / * este o idee bună să setați o culoare de fundal, în cazul în care gradientul nu se va încărca * /} / style> / head> body> / body> / html>

5. Utilizați alte proprietăți pentru a regla gradientul. Puteți face mult mai mult cu degradeuri.
   • De exemplu, nu puteți folosi doar mai mult de două culori, ci și așezați un procent în spatele fiecărei. Cu aceasta puteți indica cât de mult spațiu va obține fiecare segment de culoare.

     fundal: gradient liniar (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Adăugați transparență culorilor. Cu aceasta puteți estompa culorile. Folosiți aceeași culoare pentru a estompa de la culoare la nimic. Îți va plăcea funcția rgba () trebuie să folosească pentru a indica culoarea. Valoarea finală determină gradul de transparență: 0 pentru opac și 1 pentru transparent.

     fundal: gradient liniar (spre dreapta, rgba (147.184.116,0), rgba (147.184.116,1));

Metoda 4 din 4: setați o animație color ca fundal

1. Navigheaza catre stil> în codul dvs. HTML. Dacă găsiți o culoare de fundal solidă, dar nu, experimentați schimbarea fundalurilor de culoare. Din HTML 5, culorile de fundal trebuie definite cu CSS (Cascading Style Sheets). Dacă nu ați setat niciodată o culoare de fundal cu CSS, citiți secțiunea despre setarea unei culori de fundal solide înainte de a încerca această metodă.
2. Adăugați proprietatea animaţie la elementul „corp”. Va trebui să adăugați 2 proprietăți diferite, deoarece fiecare browser necesită cod diferit.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinit; animație: colorchange 60s infinit; } / style> / head> body> / body> / html>

   • -webkit-animație proprietatea este necesară pentru browserele bazate pe Chrome (Chrome, Opera, Safari). animaţie este standardul pentru toate celelalte browsere.
   • schimbare de culoare este ceea ce se numește animație în acest exemplu.
   • Anii '60 este durata (60 de secunde) a animației / tranziției. Asigurați-vă că setați acest lucru atât pentru kitul web, cât și pentru sintaxa implicită.
   • infinit indică faptul că animația ar trebui să se repete pe termen nelimitat. Dacă preferați să buclați culorile și apoi să vă opriți la ultima culoare, puteți omite această parte.
3. Adăugați culori animației dvs. Acum veți folosi regula @keyframes pentru a seta culorile de fundal prin care să treceți, precum și cât timp poate fi văzută fiecare culoare pe pagină. Din nou, va trebui să adăugați mai multe codificări pentru diferitele browsere.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinit; animație: colorchange 60s infinit; } @ -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>

   • Rețineți că cele două linii (@ -webkit-keyframes și @keyframes au aceleași valori pentru culorile de fundal și procentele. Ar trebui să rămână uniformă, astfel încât experiența să rămână aceeași pentru toate browserele.
   • Procentele (0%, 25%, etc.) reprezintă durata totală a animației (Anii '60). Când pagina se încarcă, fundalul va avea culoarea setată la 0% și (# 33FFF3). Când s-a redat 25% sau 60 de secunde din animație, fundalul va trece la # 78281F, și așa mai departe.
   • Puteți regla durata și culorile după cum doriți.