Cum se setează culoarea de fundal în HTML

Pentru a seta culoarea de fundal a unei pagini web în HTML, trebuie doar să faceți o schimbare rapidă în corpul codului (element "corp"), în interiorul etichetelor. Pașii pot varia în funcție de aspectul pe care doriți să-l acordați fondului. Aflați cum puteți seta o culoare solidă, o imagine, un gradient de culoare sau o animație multicolor pentru fundalul paginii dvs. Web.

conținut

Pași
Metoda 1setați un fundal solid color
Metoda 3setați un fundal cu culori gradient
Metoda 4setați un fundal care modifică culoarea

pași

Metoda 1
Setați un fundal solid color

Deschideți fișierul HTML cu editorul de text preferat. Începând cu HTML 5, atributul HTML nu mai era folosit . Acum, culoarea de fundal, precum și toate celelalte aspecte legate de stilul paginii trebuie să fie stabilite prin codul CSS.

Adăugați etichetele în documentul dvs. Toate informațiile de stil ale paginii (inclusiv culoarea de fundal) trebuie să fie incluse în aceste etichete. Dacă documentul dvs. are deja etichetele. Tot ce adăugați în element "corp" în CSS va afecta întreaga pagină.

 folosind proprietatea "culoare de fundal".

Adăugați etichetele în interiorul fișierului HTML. Toate informațiile despre stil de pe pagină (inclusiv culoarea de fundal) trebuie să fie codate în aceste etichete. Dacă ați inclus deja aceste etichete, pur și simplu treceți la acea parte a fișierului.

. Tot ce adăugați în element "corp" în CSS va afecta întreaga pagină.

Adăugați proprietatea "background-image" la element "corp". Când adăugați această proprietate, trebuie să includeți numele fișierului imagine. Asigurați-vă că fișierul imaginii este salvat în același director ca fișierul HTML (altfel va trebui să introduceți calea completă a fișierului în serverul web).

De asemenea, ar fi o idee bună să adăugați proprietatea "culoare de fundal", doar în cazul în care imaginea de fundal nu se încarcă.

Este, de asemenea, posibil să adăugați mai multe straturi de imagini. Puteți stive mai multe imagini una deasupra celeilalte. Acest lucru poate fi util dacă aveți imagini cu fundaluri transparente care se completează reciproc atunci când le depozitați.

Prima imagine din listă va fi afișată deasupra celorlalte. Al doilea va apărea sub primul și așa mai departe.

Metoda 3
Setați un fundal cu culori gradient

Utilizați CSS pentru a crea un fundal gradient de culoare. Dacă sunteți în căutarea pentru ceva cu mai mult stil decât un simplu fundal solid de culoare, dar nu ca o taxă ca a animație multicoloră, puteți încerca un gradient de culori. Gradienții sunt culori care treptat se schimbă în alte culori. Puteți crea și personaliza gradientul folosind CSS. Pentru a putea face un gradient, este necesar să înțelegem aspectele de bază ale stilului paginilor cu CSS.

Aflați sintaxa de bază. Pentru a crea un gradient aveți nevoie de două date: punctul sau unghiul de pornire și culorile între care veți face tranziția. Puteți selecta mai multe culori și puteți face un gradient între ele. De asemenea, puteți seta o adresă sau un unghi pentru gradient.

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

Creați un gradient vertical. Dacă nu specificați direcția, gradientul va merge de sus în jos, adică de sus în jos. Diferitele browsere au implementări diferite ale funcțiilor de gradient, așadar este mai bine să includeți mai multe versiuni ale codului pentru a fi compatibile cu toate.

Creați un gradient direcțional. Dacă specificați direcția gradientului puteți stabili modul în care are loc schimbarea culorii. Rețineți că diferitele browsere au moduri diferite de a interpreta adresele. Cu toate acestea, toate vor arăta același gradient.

Utilizați alte proprietăți pentru a regla gradientul. Există multe alte lucruri pe care le puteți face cu declivitățile.

De exemplu, nu puteți adăuga mai mult de două culori, dar puteți specifica și un procentaj pentru fiecare. În acest fel, puteți stabili cât spațiu trebuie ocupat fiecare segment de culoare.

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

Determinați transparența culorilor. În acest fel, puteți face ca culorile să dispară. De exemplu, puteți face o culoare să se estompeze de la sine la nimic. Pentru a face acest lucru, trebuie să definiți culoarea prin funcție rgba (). Valoarea finală va determina transparența: 0 Este complet solid și 1 complet transparent.

fundal: gradient liniar (spre dreapta, rgba (147,184,116.0), rgba (147,184,116.1)) -

Metoda 4
Setați un fundal care modifică culoarea

Accesați secțiunea din codul HTML. Dacă nu vă plac fundalul cu o singură culoare, încercați să experimentați un fundal animat care modifică culoarea. Din HTML 5 toate specificațiile de fundal ar trebui să fie incluse în codul CSS (foi de stil cascadă). Dacă nu ați stabilit niciodată un fundal cu CSS, mergeți la secțiune "Setați un fundal solid color" din acest articol înainte de a încerca această metodă.

Adăugați proprietatea de animație în element "corp". Va trebui să adăugați două proprietăți diferite, deoarece browserele diferite interpretează codul în mod diferit.

Proprietatea -webkit-animație este necesar pentru browserele bazate pe Chromium (Chrome, Opera, Safari). animație Este proprietatea standard pentru alte browsere.

În acest exemplu, ColorChange acesta va fi numele animației.

60 de ani (60 de secunde) indică durata animației sau a tranziției. Asigurați-vă că setați această valoare atât în webkit cât și în sintaxa standard.

infinit indică faptul că animația trebuie repetată pe o perioadă nedeterminată. Dacă preferați ca transformarea culorilor să apară o singură dată și să se oprească în ultima culoare, puteți lăsa acea parte necompletată.

Adăugați culorile animației. Acum trebuie să utilizați regula @keyframes pentru a seta culorile de fundal pe care doriți să le repetați, precum și cât timp doriți fiecare culoare pe pagină. Încă o dată, trebuie să inserați intrări diferite pentru diferite grupuri de browsere.

Rețineți că cele două reguli (@ -webkit-keyframes și @keyframes) au aceleași culori și procente pentru fundal. Este mai bine ca aceste valori să rămână uniforme, astfel încât efectele să pară aceleași în toate browserele.

Procentele (0%, 25%, etc.) sunt în raport cu durata totală a animației (60 de ani). Când pagina se încarcă, fundalul va fi setat pentru 0% (# 33FFF3). Odată ce animația a fost redată pentru 25% din cele 60 de secunde, fundalul va fi transformat în # 78281F și așa mai departe.

Puteți modifica orele și culorile pentru a le ajusta la rezultatul dorit.

Distribuiți pe rețelele sociale:

înrudit