Spuneți că doriți să puneți o imagine sau două pe o pagină web. O modalitate este de a utiliza background-image Proprietate CSS.

Această proprietate aplică una sau mai multe imagini de fundal unui element, cum ar fi un <div>, dupa cum documentație explică. Folosiți-l din motive estetice, cum ar fi adăugarea unui fundal texturat pe pagina dvs. web.

Adăugați o imagine

Este ușor să adăugați o imagine folosind background-image proprietate. Doar furnizați calea către imaginea din url() valoare.

Calea imaginii poate fi o adresă URL, așa cum se arată în exemplul de mai jos:

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Sau poate fi o cale locală. Iată un exemplu:

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Adăugați mai multe imagini

Puteți aplica mai multe imagini pe background-image proprietate.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

Este mult cod. Să o descompunem.

Separați fiecare imagine url() valoare cu virgulă.

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Acum poziționați și îmbunătățiți imaginile aplicând proprietăți suplimentare.

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

Sunt câteva sub-proprietăți puteți adăuga imagini de fundal, cum ar fi background-repeat și background-position, pe care l-am folosit în exemplul de mai sus. Puteți chiar să adăugați gradienți la o imagine de fundal.

Vedeți cum arată când punem totul împreună.

Ordinea contează

Ordinea în care vă listați imaginile în funcție de ordinea de stivuire. Asta înseamnă că prima imagine listată este cea mai apropiată de utilizator, conform documentație. Apoi, următorul și următorul și așa mai departe.

Iată un exemplu.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

Am enumerat două imagini în codul de mai sus. Prima imagine (morocco-blue.png) va fi în fața celei de-a doua (oriental-tiles.png). Ambele imagini au aceeași dimensiune și nu au opacitate, așa că vedem doar prima imagine.

Dar dacă mutăm a doua imagine (oriental-tile.png) spre dreapta cu 200 pixeli, atunci puteți vedea o parte din ea (restul rămâne ascuns).

Iată cum arată când punem totul împreună.

Când ar trebui să utilizați imaginea de fundal?

Există multe lucruri care să vă placă la background-image proprietate. Dar există un dezavantaj.

Este posibil ca imaginea să nu fie accesibilă tuturor utilizatorilor documentație subliniază, ca și cei care folosesc cititoare de ecran.

Acest lucru se datorează faptului că nu puteți adăuga informații textuale la background-image proprietate. Ca urmare, imaginea va fi ratată de cititoarele de ecran.

Folosește background-image proprietate numai atunci când trebuie să adăugați ceva decor la pagina dvs. În caz contrar, utilizați HTML <img> element dacă o imagine are semnificație sau scop, cum ar fi documentație note.

În acest fel, puteți adăuga text la un element de imagine, utilizând alt atribut, care descrie imaginea. Textul furnizat va fi preluat de cititoarele de ecran.

<img class="house" 
       src="./images/farnsworth_house.jpeg"
       alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Gândiți-vă astfel: background-image este o proprietate CSS, iar CSS se concentrează pe prezentare sau stil; HTML se concentrează pe semantică sau sens.

Când vine vorba de imagini, aveți opțiuni. Dacă este nevoie de o imagine pentru decorare, atunci background-image proprietatea poate fi o alegere bună pentru dvs.

Scriu despre învățarea programării și despre cele mai bune modalități de a face acest lucru (amymhaddad.com).