DifiTsi.com

Setați culoarea de fundal în HTML

Un fundal atractiv va face impresia cititorilor dvs. și puteți face mult mai mult decât afișarea unei culori solide. Fundalul este proiectat folosind CSS în locul tagurilor HTML învechite. Acest lucru asigură faptul că site-ul dvs. Web este compatibil cu majoritatea browserelor și poate fi ușor upgradat pentru funcționalități viitoare.

metodă

Metoda 1
Fundal monocrom

Image cu titlul 2609629 1
1
Utilizați proprietatea CSS "background-color". Cel vechi Atributul HTML nu mai este acceptat ca de la HTML5. Culoarea de fundal ar trebui să fie tratată cu CSS împreună cu alte aspecte stilistice ale paginii dvs.
  • Denumirea imaginii 2609629 2
    2
    Adăugați proprietatea "background-color" la element adăugat. Acest element va fi afișat pe întreaga pagină.
  • Imagine cu denumirea 2609629 3
    3
    Adăugați culoarea care trebuie afișată. Există trei moduri în care puteți introduce o culoare. Puteți alege culorile principale (roșu, albastru, galben, verde etc indica). Puteți introduce coduri hexazecimale (hex) pentru culoarea dorită, de ex. # 000000 pentru negru. De asemenea, puteți introduce valoarea RGB pentru culoarea, de ex. rgb (255,255,0) pentru galben. Mai jos este un exemplu de utilizare a codului hex, care conferă fundalului aceeași culoare ca banner-ul wikiHow:
    • Red - # FF0000
    • Orange - # FFA500
    • Galben - # FFFF00
    • Verde - # 008000
    • Albastru - # 0000FF
    • Indigo - # 4B0082
    • Violet - # EE82EE
  • Image cu titlul 2609629 4
    4
    Utilizați proprietatea culorii de fundal pentru a da alte elemente o culoare de fundal. Nu vă limitați la fundal doar pentru element să folosească. Puteți, de asemenea, să o setați pentru toate celelalte elemente:
    Acest titlu are un fundal portocaliu
    Acest paragraf are un fundal roșu

    • Metoda 2
    Fundal cu culoarea în schimbare

    Image cu titlul 2609629 5
    1
    Adăugați codul pentru tranziție. Puteți crea un fundal animat care modifică nuanțele. Acest lucru nu este acceptat de browsere mai vechi, în special de Internet Explorer (IE 10 este cea mai veche versiune care poate folosi acest lucru). Rețineți că trebuie să specificați codul de două ori, deoarece Chrome, Opera și Safari utilizează o sintaxă diferită de IE, Firefox și alte browsere.
    • Puteți vedea valoarea 20s Modificați mai sus pentru a ajusta timpul necesar pentru tranziție. 20s înseamnă că tranziția durează 20 de secunde. Asigurați-vă că modificați acest lucru pentru sintaxa webkit și standard.
    • Poți infinit schimbați la un număr astfel încât să se repete numai de un anumit număr de ori. fundal-culoare: # C9DCB9- în elementul corpului este culoarea care va fi afișată după terminarea redării animației.
  • Imagine cu titlul 2609629 6
    2
    Lipiți codul pentru culorile pe care doriți să le comutați. Dacă aveți codul de animație, puteți specifica codul pentru culorile pe care doriți să le comutați. Din nou, aveți nevoie de intrări separate pentru diferitele browsere.

    • Metoda 3
    Imagine de fundal

    1. 1


      Setați o imagine ca fundal. Puteți utiliza fișierele imagine stocate pe serverul dvs. web ca fundal pentru pagina dvs. Asigurați-vă că fișierele de imagini sunt stocate în același director ca fișierele pentru paginile web.
    2. 2
      Suprapuneți mai multe imagini. Puteți stivui mai multe poze deasupra celuilalt. Acest lucru poate fi util dacă aveți imagini cu fundaluri transparente care se completează reciproc pe măsură ce se suprapun.
      • Prima imagine pe care o vedeți apare în partea de sus. A doua imagine apare în spatele primei imagini.

    Metoda 4
    Fundal gradient

    Image cu titlul 2609629 7
    1
    Creați un Gradient Background cu CSS. Cu CSS, puteți crea un fundal gradient care trece de la o culoare la alta. Graficele de fundal nu sunt acceptate în Internet Explorer 9 sau mai devreme.
  • Image cu titlul 2609629 8
    2
    Înțelegeți sintaxa de bază. Când creați un gradient, există două piese cheie de informații de care aveți nevoie: punctul de pornire / unghiul și culorile pentru gradient. Puteți selecta mai multe culori astfel încât gradientul să se schimbe între toate și să puteți seta o direcție sau un unghi pentru gradient.
    fundal: gradient liniar (direcție / unghi, culoare1, culoare2, culoare3, etc.) -
  • Imagine cu denumirea 2609629 9
    3
    Creați un gradient vertical. Dacă nu specificați direcția, gradientul merge de sus în jos. Diferitele browsere au implementări diferite ale acestei funcții, prin urmare trebuie să specificați diferite versiuni pentru a fi afișate în toate browserele.
  • Imagine cu denumirea 2609629 10
    4
    Faceți un gradient direcțional. Adăugarea unei direcții spre gradient vă permite să modificați modul în care este afișată modificarea culorii. Rețineți că diferite browsere au diferite moduri de interpretare a indicațiilor de orientare. Toate conduc la același gradient de culoare.
  • Imagine cu denumirea 2609629 11
    5
    Utilizați alte proprietăți pentru a regla gradientul. Există mult mai mult pentru ceea ce puteți face cu declivitățile.
    • Puteți, de ex. nu specificați doar mai mult de două culori, puteți specifica, de asemenea, un procent după fiecare. Astfel puteți seta spațiul dorit între fiecare segment de culoare.
      fundal: gradient linear (# 93B874 10%, # C9DCB9 70%, # 000000 90%) -
    • De asemenea, puteți adăuga transparență. Acest lucru face ca culoarea să se estompeze. Utilizați aceeași culoare pentru a decolora de la culoare la nici o culoare. Trebuie să faci această funcție RGBA () pentru a determina culoarea. Valoarea finală determină transparența: 0 pentru a trece prin 1 pentru transparență.
      fundal: gradient liniar (spre dreapta, rgba (147,184,116,0), rgba (147,184,116,1)) -
    • Distribuiți pe rețelele sociale:

    înrudit