Cum să setați culoarea de fundal în HTML

Pentru a seta culoarea de fundal a unei pagini web în HTML, faceți doar o schimbare rapidă a elementului "corp" în interiorul etichetelor. Pașii de urmat sunt ușor diferiți în funcție de efectul pe care doriți să-l realizați. Aflați cum puteți seta o fundal solidă pentru culori, imagini, gradienți sau multi-culori.

conținut

Paşi
Metoda 1
Metoda 2
Metoda 3
Metoda 4

paşi

Metoda 1

Setați o culoare uniformă ca fundal

Deschideți fișierul HTML cu editorul dvs. de text preferat. Cu HTML5, atributul HTML nu mai este acceptată. Culorile de fundal, împreună cu toate celelalte aspecte estetice ale paginii, ar trebui să fie gestionate cu CSS.

Adăugați etichete în documentul dvs. Toate informațiile despre stilul paginii (inclusiv culoarea de fundal) trebuie inserate între aceste etichete. Dacă ați introdus deja etichetele, parcurgeți pur și simplu acea parte a fișierului.

Tastați elementul "corp" în interiorul etichetelor. Toate modificările aduse elementului "corp" în CSS ele afectează întreaga pagină.

Adăugați proprietatea "culoare de fundal" element "corp".

Adăugați culoarea dorită la proprietate "culoare de fundal". Puteți introduce numele de culoare (,,, etc), folosind coduri hexazecimale (hex) pentru a introduce tonul pe care doriți (cum ar fi pentru negru, pentru roșu, etc.) sau introduceți valoarea RGB a culorii (de exemplu, galben). Iată un exemplu care folosește expresia hexazecimală pentru a face culoarea de fundal la fel ca bannerul wikiHow:

alb:

Roz deschis:

Terenul pamant sienna:

Indigo:

Viola:

Vizitați pagina w3schools.com, HTML Color Picker, pentru a găsi codurile hexazecimale ale tuturor culorilor cele mai comune.

utilizare "culoare de fundal" pentru a aplica culoarea de fundal celorlalte elemente. Așa cum ați adăugat acest cuvânt cheie la elementul corpului, îl puteți utiliza pentru a defini culoarea de fundal a altor părți ale paginii. Introduceți elementele de editat în etichete cu proprietatea de culoare-fundal.

Acest paragraf are un fundal roșu

Metoda 2

Utilizați o imagine ca fundal

Deschideți fișierul HTML cu editorul dvs. de text preferat. Mulți oameni preferă să utilizeze imagini ca fundaluri pentru site-urile lor. Acest lucru vă permite să creați fundalul cu un design, un model, o fotografie sau orice alt tip de imagine. Cu HTML5, toate tipurile de fundal trebuie configurate cu CSS (Sheets of Cascading Style Sheets), în etichete.

Tastați elementul "corp" în interiorul etichetelor. Toate modificările aduse elementului "corp" în CSS ele afectează întreaga pagină.

Adăugați proprietatea "culoare de fundal" element "corp". După ce ați terminat, veți avea nevoie de numele imaginii. Asigurați-vă că fișierul se află în același folder ca și pagina HTML (altfel trebuie să introduceți calea completă a fișierului de pe serverul web).

Este o idee bună să adăugați proprietatea oricum, în cazul în care imaginea nu este încărcată.

Suprapuneți mai multe imagini. Puteți pune mai multe imagini una peste alta. Acest lucru poate fi util dacă aveți desene cu fundal transparent care sunt completate dacă sunt suprapuse.

Prima imagine va apărea în partea de sus. Al doilea din spatele primului.

Metoda 3

Creați un fundal cu gradient

Utilizați CSS pentru a crea un fundal gradient. Dacă sunteți în căutarea unei soluții stilistic mai eficiente decât o culoare solidă solidă, dar nu la fel de confuză ca și animațiile multi-colorate, încercați acest tip de fundal. Gradienții sunt culori care se transformă în alte nuanțe. Puteți utiliza CSS pentru a crea și personaliza unul. Înainte de a încerca, asigurați-vă că înțelegeți elementele de bază ale CSS.

Aflați sintaxa de bază. Pentru a crea un gradient, aveți nevoie de două informații: punctul de pornire sau unghiul și culorile care vor fi folosite. Puteți alege mai multe culori, astfel încât gradientul să treacă de la unul la altul și puteți decide direcția în care are loc transformarea.

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

Creați un gradient vertical. Dacă nu specificați nici o direcție, gradientul merge de sus în jos. Diferitele browsere implementează această funcție în mod diferit, deci trebuie să includeți mai multe versiuni ale codului.

Creați un gradient direcțional. Prin adăugarea unei direcții spre gradient puteți schimba modul în care este afișată transformarea. Rețineți că diferitele browsere interpretează comenzile diferit. Cu toate acestea, toate produc același rezultat.

Utilizați alte proprietăți pentru a configura gradientul. Posibilitățile la dispoziția dumneavoastră sunt multe.

De exemplu, puteți adăuga mai mult de două culori și puteți alege procentajul fiecăruia. Aceasta vă permite să decideți cât spațiu să alocați fiecărui segment de culoare.

fundal: gradient linear (# 93B874 10%, # C9DCB9 70%, # 000000 90%) -

Adăugați transparență la culori. Această funcție îi face să dispară. Utilizați aceeași culoare, definită cu funcția, pentru a obține de la nuanță la transparență completă. Valoarea finală determină transparența: pentru opac și pentru translucid.

fundal: gradient liniar (spre dreapta, rgba (147,184,116,0), rgba (147,184,116,1)) -

Metoda 4

Configurați un fundal care modifică culoarea

Găsiți eticheta din interiorul codului HTML. Dacă nu vă plac mediile simple, încercați să experimentați acest fundal animat și irizat. Cu HTML 5, culorile de fundal trebuie definite în CSS (Sheets of Cascading Style Sheets). Dacă nu ați mai făcut acest lucru înainte, citiți Setarea unei culori uniforme ca fundal înainte de a încerca această metodă.

Adăugați proprietatea de animație la element "corp". Veți vedea două comenzi diferite, specifice diferitelor browsere.

este proprietatea care va fi utilizată în browserele bazate pe Chromium (Chrome, Opera, Safari). este standard pentru toate celelalte browsere.

este numele animației din acest exemplu.

este durata (60 secunde) a animației. Asigurați-vă că ați setat-o pentru ambele coduri.

setați animația să se repete continuu. Dacă preferați ca culorile să se modifice o singură dată, înainte de a opri ultima nuanță, nu introduceți această comandă.

Alegeți culorile animației. Acum veți folosi regula @keyframes pentru a seta culorile de fundal care vor fi folosite în animație, precum și durata fiecărei taste. De asemenea, în acest caz, sunt necesare coduri diferite pentru diferitele browsere.

Rețineți că cele două reguli (e) au aceleași culori și procente. Asigurați-vă că parametrii sunt identici, astfel încât experiența să fie aceeași pe toate browserele.

Procentajele (,, etc.) se referă la durata totală a animației (). Odată ce pagina este încărcată, fundalul va avea culoarea setată la (). După 25% din 60 de secunde, fundalul va deveni și așa mai departe.

Puteți modifica orele și culorile în funcție de nevoile dvs.

Distribuiți pe rețelele sociale:

înrudit