Det ' billedsprites ” er en teknik, hvor der skabes ét stort billede, der består af flere enkeltbilleder. Og enhver del af det store billede kan vises i forhold til designkravene. Det hjælper udviklere med at bygge visuelt tiltalende elementer problemfrit. Billedsprites kan bruges til ikoner, knapper og andre grafiske elementer. Denne artikel demonstrerer trin-for-trin-proceduren for at bruge billedsprites i CSS.
Sådan bruger du I mage Sprites i CSS?
I CSS bruger udviklerne billedsprites til at minimere/reducere indlæsningstiden på en webside. Det hjælper med at reducere HTTP-anmodninger, sikrer hurtigere indlæsning og forbedrer brugeroplevelsesfaktoren. Besøg for eksempel nedenstående eksempel:
Eksempel: Brug af Image Sprite i listeelement
I dette eksempel oprettes en ordnet liste, og i hvert listepunkt vises en del af sprite-billedet på skærmen.
Forudsætning:
For at få det specifikke billede fra billedspriten er dimensionerne af billedspriten, der bliver brugt, særligt vigtige. For eksempel billedet, der har en dimension på ' 937×156 ' er vist nedenfor:
Følg nedenstående trin for at få vist en del af det ovenfor viste billede:
Trin 1: Oprettelse af listeelementer
Den uordnede liste genereres på websiden, som det ses i nedenstående kodestykke:
< ul >Tom: < at id = 'tom' > at >
Halvt: < at id = 'halvt' > at >
Fuld: < at id = 'fuld' > at >
ul >
Beskrivelsen af ovenstående kodestykke:
-
- Først skal du bruge '
” tag. - Tildel derefter id'erne for ' tom ', ' halvt ' og ' fuld ” for tre listepunkter. Disse bruges senere til at vise en del af det større billede.
- Først skal du bruge '
Trin 2: Visning af det første billede
For at vise det tomme hjerte på websiden, som er det første billede i billedspriten. Brug ' tom ” id og indsæt følgende kode:
#empty {bredde: 157px;
højde: 150px;
baggrund: url ( .. / sprite.jpg ) 0 0 ;
}
I ovenstående kodelinje:
-
- Først skal du indstille ' bredde ' og ' højde ” af det billede, som udvikleren ønsker at vise på websiden.
- Disse egenskaber er tildelt værdierne for ' 157 pixels ' og ' 150 px ” ifølge det ovenfor angivne eksempel, men de kan variere i forhold til billederne med forskellige dimensioner.
- Angiv derefter stien til ' sprite ' billede til ' baggrund ” ejendom. Indstil nu retningen på ' 0 ' og ' 0 ” og den viser den første del af billedspriten.
Efter udførelsen af ovenstående kodelinje ser websiden sådan ud:
Ovenstående snapshot viser, at det første billede fra billedspriten vises på websiden.
Trin 3: Visning af det midterste og sidste billede
For at vise den midterste og sidste billeddel fra billedspriten skal du indsætte følgende CSS-egenskaber:
#halvt {bredde: 157px;
højde: 150px;
baggrund: url ( .. / sprite.jpg ) -462px 0px
}
#fuld {
bredde: 157px;
højde: 150px;
baggrund: url ( .. / sprite.jpg ) -770 pixels 0px
}
Beskrivelsen af ovenstående kodestykke:
-
- Først skal du vælge ' halvt ” id og indsæt de samme CSS-egenskaber, som er brugt i ovenstående trin.
- For at vise det midterste billede fra billedspriten skal du ændre retningen eller tildele polstring fra venstre side. For eksempel er retningen fra venstre sat til ' negativ 462px ”.
- På samme måde skal du vise det sidste billede ved at indstille retningen fra venstre til ' -770 pixels ”.
Efter udførelsen af ovenstående CSS-egenskaber ser websiden sådan ud:
Ovenstående snapshot viser, at de tre billeder fra billedspriten er blevet vist på websiden.
Konklusion
Det ' billedsprites ” er et enkelt stort billede, der består af flere mindre billeder ligesom collage-funktionen. Og enhver del af det store billede, der repræsenterer et mindre billede, kan vises. I henhold til kravene ved hjælp af ' baggrund ” ejendom leveret af CSS. For at vise det specifikke billede fra billedspriten skal du først indstille bredden og højden på billedet. Brug derefter retningsværdierne til kun at vise den del af billedet fra billedspriten.