CSS Image Sprites. Exemplu explicat.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Un image sprite este o colecție de imagini puse într-o singură imagine.
O pagină web cu multe imagini poate dura mult timp pentru a se încărca și generează mai multe solicitări de server.
Utilizarea image sprite-urilor va reduce numărul de solicitări de server și va economisi lățimea de bandă.
Image Sprites - Exemplu simplu
În loc să folosim trei imagini separate, folosim această singură imagine („img_navsprites.gif”):
Cu CSS, putem afișa doar partea din imagine de care avem nevoie.
În exemplul următor, CSS specifică ce parte a imaginii "img_navsprites.gif" să arate:
Exemplu:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Exemplu explicat:
<img id = "home" src = "img_trans.gif"> - Definește doar o imagine transparentă mică, deoarece atributul src nu poate fi gol. Imaginea afișată va fi imaginea de fundal pe care o specificăm în CSS.
width: 46px; height: 44px; - Definește portiunea imaginii pe care dorim sa o folosim.
background: url(img_navsprites.gif) 0 0; - Definește imaginea de fundal și poziția acesteia (left 0px, top 0px).
Acesta este cel mai simplu mod de a utiliza image sprites, acum dorim să-l extindem folosind link-uri și efectele hover.