Unul dintre cele mai frecvente lucruri pe care trebuie să le faceți ca dezvoltator web este să schimbați culoarea de fundal a unui element HTML. Dar poate fi confuz dacă nu înțelegeți cum să utilizați CSS background-color proprietate.

În articol, discutăm

  • valoarea implicită a culorii de fundal a unui element HTML
  • cum să schimbați culoarea de fundal a unui div, care este un element foarte comun
  • care părți ale modelului de casetă CSS sunt afectate de background-color proprietate și
  • valorile diferite pe care le poate lua această proprietate.

Culoarea de fundal implicită a unui element

Culoarea de fundal implicită a unui div este transparent. Deci, dacă nu specificați culoarea de fundal a unui div, acesta va afișa cea a elementului său părinte.

Schimbarea culorii de fundal a unui Div

În acest exemplu, vom schimba culorile de fundal ale următoarelor divs.

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

Fără niciun stil, acest lucru se va traduce vizual la următoarele.

Tutorial de culoare de fundal HTML Cum se schimba

Să schimbăm culoarea de fundal a divurilor adăugând stiluri la clase. Puteți urmări încercând exemplele dintr-un fișier HTML.

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

Acest lucru va avea ca rezultat următoarele:

1611708907 149 Tutorial de culoare de fundal HTML Cum se schimba

Misto! Am schimbat cu succes culoarea de fundal a acestui div. În continuare, să aflăm mai multe despre această proprietate. Să vedem cum afectează proprietatea de culoare de fundal părți ale modelului CSS-box.

Culoarea de fundal și modelul CSS Box

Conform modelului de casetă CSS, toate elementele HTML pot fi modelate ca casete dreptunghiulare. Fiecare cutie este compusă din 4 părți, așa cum se arată în diagrama de mai jos.

1611708907 45 Tutorial de culoare de fundal HTML Cum se schimba
Modelul CSS Box

Puteți citi pe modelul cutiei dacă nu sunteți familiarizat cu acesta. Întrebarea este, ce parte a modelului cutiei este afectată atunci când schimbați culoarea de fundal a unui div? Răspunsul simplu este zona de umplere și zona de conținut. Să confirmăm acest lucru folosind un exemplu.


<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>


Acest lucru va avea ca rezultat:

1611708907 397 Tutorial de culoare de fundal HTML Cum se schimba

Din exemplul de mai sus, putem vedea că zona de margine și zona de margine nu sunt afectate de modificarea culorii de fundal. Putem schimba culoarea chenarului folosind proprietatea border-color. Zona de margine rămâne transparentă și reflectă culoarea de fundal a containerului părinte.

În cele din urmă, să discutăm valorile pe care le poate lua proprietatea de culoare de fundal.

Valori de culoare de fundal

La fel ca proprietatea de culoare, proprietatea de culoare de fundal poate lua șase valori diferite. Să luăm în considerare cele mai comune trei valori cu un exemplu. În exemplu, setăm culoarea de fundal a divului la roșu cu valori diferite.

<style>
    /* Keyword value/name of color */
    .div-1 {
        background-color: red;
    }
    
    /* Hexadecimal value */
    .div-2 {
       background-color: #FF0000;	 
    }
    
    /* RGB value */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

Observați că toate rezultă cu aceeași culoare de fundal.

1611708907 859 Tutorial de culoare de fundal HTML Cum se schimba

Alte valori background-color proprietatea poate include valoarea HSL, valorile speciale ale cuvintelor cheie și valorile globale. Iată exemple de fiecare dintre ele.

/* HSL value */
background-color: hsl(0, 100%, 25%;

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

Puteți citi mai multe despre fiecare dintre aceste valori aici.

Notă suplimentară

Când setați culoarea de fundal a unui element, este important să vă asigurați că raportul de contrast al culorii de fundal și al culorii textului pe care îl conține este suficient de mare. Acest lucru este pentru a se asigura că persoanele cu vedere scăzută pot citi cu ușurință textul.

Luați în considerare aceste două divs.

1611708907 673 Tutorial de culoare de fundal HTML Cum se schimba

Contrastul dintre culoarea de fundal a primului div și culoarea textului nu este suficient de mare pentru ca toată lumea să o poată vedea. Deci, dacă nu sunteți singurul care folosește site-ul web pe care îl construiți și aveți o vedere foarte bună, ar trebui să evitați astfel de combinații de culori.

Al doilea div are un raport de contrast mult mai bun între culoarea de fundal și culoarea textului. Astfel, este mai accesibil și mai clar pentru citire.

Concluzie

În acest articol, am văzut cum puteți schimba culoarea de fundal a unui div. De asemenea, am discutat despre ce părți ale modelului de casetă CSS sunt afectate de schimbarea culorii de fundal. În cele din urmă, am discutat valorile pe care le poate lua proprietatea de culoare de fundal.

Sper că ți s-a părut util acest articol. Mulțumesc pentru lectură.