CSS Image Sprites

Afbeeldingssprite

Een afbeeldingssprite is een verzameling afbeeldingen die in een enkel beeld zijn opgenomen.

Een webpagina met veel afbeeldingen kan een lange laadtijd vereisen en meerdere serververzoeken genereren.

Het gebruik van een afbeeldingssprite vermindert het aantal serververzoeken en bespaart bandbreedte.

Afbeeldingssprite - Eenvoudig voorbeeld

We gebruiken het volgende enkele beeld ("navsprites.gif") in plaats van drie afzonderlijke beelden:

导航图像

Door gebruik te maken van CSS kunnen we alleen een deel van het beeld weergeven dat nodig is.

In het volgende voorbeeld specificeert CSS welk deel van het beeld "navsprites.gif" we moeten weergeven:

voorbeeld

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Probeer het zelf

Voorbeeldverklaring:

  • <img id="home" src="trans.gif"> - Definieer alleen een klein transparant beeld, omdat de src-eigenschap niet leeg kan zijn. Het daadwerkelijk weergegeven beeld zal het achtergrondbeeld zijn dat we in CSS hebben gespecificeerd.
  • width: 46px; height: 44px; - Definieer het deel van het beeld dat we zullen gebruiken
  • background: url(navsprites.gif) 0 0; - Definieer de achtergrondafbeelding en zijn positie (links 0px, boven 0px)

Afbeeldingssprite - Maak een navigatielijst

We willen gebruik maken van een spriteafbeelding ("navsprites.gif") om een navigatielijst te maken.

We zullen een HTML-lijst gebruiken, omdat deze zowel koppelingen kan zijn als ondersteuning biedt voor achtergrondafbeeldingen:

voorbeeld

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Probeer het zelf

Voorbeeldverklaring:

  • #navlist {position:relative;} - De positie wordt ingesteld op relatief, om absolute positionering mogelijk te maken
  • #navlist li {marge:0;inleg:0;lijststijl:none;positie:absolute;boven:0;} - De marges en inleg worden ingesteld op 0, de lijststijl wordt verwijderd en alle lijstitems zijn absolute positioning
  • #navlist li, #navlist a {hoogte:44px;display:block;} - Alle afbeeldingen hebben een hoogte van 44px

nu beginnen we met het instellen van positie en stijl voor elke specifieke sectie:

  • #home {links:0px;breedte:46px;} - Altijd links定位, afbeeldingsbreedte 46px
  • #home {background:url(navsprites.gif) 0 0;} - Definieer de achtergrondafbeelding en zijn positie (links 0px, top 0px)
  • #prev {links:63px;breedte:43px;} - Links定位 63px (#home breedte 46px + wat extra ruimte tussen items), breedte 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Definieer de achtergrondafbeelding naar rechts 47px (#home breedte 46px + 1px scheidingslijn)
  • #next {links:129px;breedte:43px;} - Links定位 129px (#prev start is 63px + #prev breedte is 43px + extra ruimte), breedte 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Definieer de achtergrondafbeelding naar rechts 91px (#home breedte 46px + 1px scheidingslijn+ #prev breedte 43px + 1px scheidingslijn)

afbeeldingssprite - hover-effect

nu voegen we een hover-effect toe aan de navigatielijst.

tip::hover selector kan worden gebruikt voor alle elementen, en niet alleen voor links.

onze nieuwe afbeelding ("navsprites_hover.gif") bevat drie navigatieafbeeldingen en drie afbeeldingen voor de hover-effect:

导航图像

omdat dit een afbeelding is, en niet zes afzonderlijke bestanden, dus wanneer de gebruiker de muis over de afbeelding houdt:er is geen laadvertraging.

we voegen slechts drie regels code toe om de hover-effect te bereiken:

voorbeeld

#home a:hover {
  achtergrond: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  achtergrond: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  achtergrond: url('navsprites_hover.gif') -91px -45px;
}

Probeer het zelf

Voorbeeldverklaring:

#home a:hover {achtergrond: transparant url('img_navsprites_hover.gif') 0 -45px;} - We hebben dezelfde achtergrondpositie gespecificeerd voor alle drie de hoverafbeeldingen, alleen 45 pixels naar beneden