« image sprites ” er en teknikk der det lages ett stort bilde som består av flere enkeltbilder. Og hvilken som helst del av det store bildet kan vises i forhold til designkravene. Det hjelper utviklere å bygge visuelt tiltalende elementer jevnt. Bildesprites kan brukes til ikoner, knapper og andre grafiske elementer. Denne artikkelen demonstrerer trinn-for-trinn-prosedyren for bruk av image sprites i CSS.
Hvordan bruke I mage Sprites i CSS?
I CSS bruker utviklerne image sprites for å minimere/redusere lastetiden til en nettside. Det hjelper med å redusere HTTP-forespørsler, sikrer raskere lasting og forbedrer brukeropplevelsesfaktoren. Besøk for eksempel eksemplet nedenfor:
Eksempel: Bruk av Image Sprite i listeelement
I dette eksemplet opprettes en ordnet liste og i hvert listeelement vises en del av spritebildet på skjermen.
Forutsetning:
For å få det spesifikke bildet fra bildespriten er dimensjonene til bildespriten som blir brukt spesielt viktige. For eksempel bildet som har en dimensjon på ' 937×156 ' vises nedenfor:
Følg trinnene nedenfor for å vise en del av bildet ovenfor:
Trinn 1: Oppretting av listeelementer
Den uordnede listen genereres på nettsiden, som vist i kodebiten nedenfor:
< ul >Tømme: < at id = 'tømme' > at >
Halv: < at id = 'halv' > at >
Full: < at id = 'full' > at >
ul >
Beskrivelsen av kodebiten ovenfor:
-
- Bruk først '
' stikkord. - Deretter tildeler du ID-ene til ' tømme ', ' halv ' og ' full ' for tre listeelementer. Disse brukes senere for å vise deler av det større bildet.
- Bruk først '
Trinn 2: Vise det første bildet
For å vise det tomme hjertet på nettsiden som er det første bildet i bildespriten. Bruke ' tømme ' id og sett inn følgende kode:
#empty {bredde: 157px;
høyde: 150px;
bakgrunn: url ( .. / sprite.jpg ) 0 0 ;
}
I kodelinjen ovenfor:
-
- Først setter du ' bredde ' og ' høyde ” av bildet som utvikleren ønsker å vise på nettsiden.
- Disse egenskapene er tilordnet verdiene for ' 157 piksler ' og ' 150 piksler ” i henhold til eksemplet ovenfor, men de kan variere i forhold til bildene med forskjellige dimensjoner.
- Angi deretter banen til ' sprite ' bildet til ' bakgrunn ' eiendom. Sett nå retningen til ' 0 ' og ' 0 ” og den viser den første delen av bildespriten.
Etter utførelse av kodelinjen ovenfor, ser nettsiden slik ut:
Øyeblikksbildet ovenfor viser at det første bildet fra bildespriten vises på nettsiden.
Trinn 3: Vise det midtre og siste bildet
For å vise den midterste og siste bildedelen fra bildespriten, sett inn følgende CSS-egenskaper:
#halv {bredde: 157px;
høyde: 150px;
bakgrunn: url ( .. / sprite.jpg ) -462 piksler 0px
}
#full {
bredde: 157px;
høyde: 150px;
bakgrunn: url ( .. / sprite.jpg ) -770 piksler 0px
}
Beskrivelsen av kodebiten ovenfor:
-
- Først velger du ' halv ” id og sett inn de samme CSS-egenskapene som brukes i trinnet ovenfor.
- For å vise det midterste bildet fra bildespriten, endre retning eller tilordne polstring fra venstre side. For eksempel er retningen fra venstre satt til ' negativ 462px '.
- På samme måte, vis det siste bildet ved å sette retningen fra venstre til ' -770 piksler '.
Etter utførelse av CSS-egenskapene ovenfor, ser nettsiden slik ut:
Øyeblikksbildet ovenfor viser at de tre bildene fra bildespriten har blitt vist på nettsiden.
Konklusjon
« image sprites ” er et enkelt stort bilde som består av flere mindre bilder akkurat som collage-funksjonen. Og hvilken som helst del av det store bildet som representerer et mindre bilde kan vises. I henhold til kravene ved å bruke ' bakgrunn ” eiendom levert av CSS. For å vise det spesifikke bildet fra bildespriten må du først angi bredden og høyden på bildet. Deretter bruker du retningsverdiene til å vise bare delen av bildet fra bildespriten.