Setarea culorilor de fundal în HTML

Având culori strălucitoare în partea de jos a ecranului vă poate ajuta să atrageți mai mulți cititori pe pagina dvs. Există mai multe opțiuni pentru cei care doresc să utilizeze mai mult decât culori solide. Pentru a le configura, folosim limba CSS în locul tagurilor HTML depășite. Acest lucru face ca site-ul să fie compatibil cu majoritatea browserelor și poate fi actualizat cu ușurință ori de câte ori sunt disponibile noi funcții.

conținut

Pași
Metoda 1fundal cu culori solide
Acest antet va avea un fundal portocaliu
Metoda 2fundal cu culori mutante
Metoda 3fundal cu imagini
Metoda 4fundal gradient

pași

Metoda 1
Fundal cu culori solide

Utilizați proprietatea "culoarea de fundal" a CSS. Vechiul atribut HTML nu mai este acceptat de HTML5. Culoarea de fundal, precum și alte aspecte stilistice ale paginii trebuie să fie configurate cu CSS.

Adăugați proprietatea culorii de fundal la element . Acest element va apărea pe toată pagina.

Adăugați culoarea pe care doriți să o afișați. Există trei moduri de a face acest lucru: introduceți culorile principale (roșu, albastru, galben, verde etc.) cu codurile roșu, albastru, galben, verde (în limba engleză) etc. - utilizați coduri hexazecimale pentru culoare, ca # 000000 la negru - sau introduceți valoarea RGB a culorii, ca rgb (255,255,0) la galben. Mai jos este un exemplu de cod hexazecimal în uz - care va oferi fundalului site-ului aceeași culoare ca și frontendul wikiHow.

Red - # FF0000
Orange - # FFA500
Galben - # FFFF00
Verde - # 008000
Albastru - # 0000FF
anil - # 4B0082
Purple - # EE82EE

Utilizați proprietatea de culoare de fundal pentru a aplica culorile de fundal altor elemente. Nu vă limitați la a face acest lucru numai în element . Dacă doriți, puteți să o configurați și în altă parte:

Acest antet va avea un fundal portocaliu

Acest paragraf va avea un fundal roșu

Metoda 2
Fundal cu culori mutante

Adăugați codul de tranziție. Puteți crea un fundal animat prin schimbarea periodică a tonurilor. Această caracteristică nu este acceptată de browsere mai vechi, în special Internet Explorer (cu excepția cazului în care are versiunea 10 sau o versiune ulterioară). În plus, trebuie să includă două seturi de coduri de animație, ca Chrome, Opera și Safari folosesc o sintaxă diferită în comparație cu IE, Firefox și alte browsere.

Valoarea 20s deasupra pot fi ajustate în funcție de timpul de tranziție a culorii. 20s înseamnă că această tranziție va dura 20 de secunde. Dacă doriți să o modificați, schimbați atât webkit, cât și sintaxa implicită.
Valoarea infinit pot fi modificate pentru a repeta anumite momente. Codul fundal-culoare: # C9DCB9- în element indică culoarea care va fi afișată după animație.

Adăugați codul de culoare pe care doriți să-l acordați paginii în timpul tranziției. După ce ați codat animația, setați între timp codul de culoare pe care doriți să-l utilizați. Din nou: generați intrări diferite pentru diferite browsere.

Metoda 3
Fundal cu imagini

Utilizați o imagine ca fundal pentru pagină. Alegeți un fișier salvat pe serverul de internet - acesta trebuie să fie stocat lângă fișierul site-ului propriu-zis.

2
Utilizați mai multe imagini stratificate. Fișierele pot fi încărcate unele pe altele. Această strategie este utilă dacă aveți fundaluri transparente care se completează reciproc atunci când sunt "stivuite".
- Prima imagine listată va apărea în partea de sus a stivei. Al doilea va veni în curând.

Metoda 4
Fundal gradient

Utilizați CSS pentru a crea un fundal de gradient care trece de la o culoare la alta. Această caracteristică nu este acceptată de versiunile Internet Explorer 9 sau versiuni mai vechi.

Înțelegeți sintaxa de bază. Există două informații esențiale cu privire la crearea unui fundal gradient: punctul de pornire / unghiul efectului și culorile de tranziție. Puteți selecta și utiliza mai multe sunete sau puteți seta o anumită direcție sau unghi pentru efect.

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

Efectuați un efect de gradient vertical. Dacă nu specificați direcția, efectul se va derula în sus și în jos. Diferitele browsere web execută această funcție în moduri diferite - deci includeți mai multe versiuni ale acesteia pentru a vă asigura că acestea pot fi redate pe mai multe dintre ele.

Efectuați un efect de gradient direcțional. Prin adăugarea unei direcții la efect, puteți modifica tranziția de culoare. Diferitele browsere interpretează această modificare în moduri diferite. Cu toate acestea, toate vor avea același efect.

Utilizați alte proprietăți pentru a ajusta efectul de gradient. Există numeroase alte posibilități de ao schimba.

De exemplu: în plus față de adăugarea a mai mult de două culori, puteți modifica procentajul fiecăruia, configurați câte spațiu are fiecare segment pe ecran.
```
fundal: gradient linear (# 93B874 10%, # C9DCB9 70%, # 000000 90%) -
```
Dacă doriți, puteți adăuga transparență și pe ecran. Astfel, culoarea va deveni din ce în ce mai decolorată. Alegeți un singur ton, astfel încât acesta să dispară până când dispare. Pentru a configura aceste setări, utilizați rgba (). Valoarea finală determină transparența: 0 pentru o culoare solidă și 1 la transparente.
```
fundal: gradient liniar (în dreapta, rgba (147,184,116,0), rgba (147,184,116,1)) -
```

Distribuiți pe rețelele sociale:

înrudit