CSS Image Sprite

Bilder sprite

Bilder sprite är en samling av bilder som innehåller en enda bild.

En webbsida som innehåller många bilder kan ta lång tid att ladda och genererar flera serverförfrågningar.

Användning av bilder sprite minskar antalet serverförfrågningar och sparar bandbredd.

Bilder sprite - En enkel exempel

Vi använder en enda bild ("navsprites.gif") istället för att använda tre enskilda bilder:

Navigationsbilder

Genom att använda CSS kan vi endast visa en viss del av den nödvändiga bilden.

I följande exempel specificerar CSS vilket del av "navsprites.gif"- bilden som ska visas:

Exempel

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

Try it yourself

Example explanation:

  • <img id="home" src="trans.gif"> - Definiera endast en liten transparent bild eftersom src-attributet inte får vara tomt. Den faktiska bild som visas kommer att vara den bakgrundsbild vi specificerar i CSS.
  • width: 46px; height: 44px; - Definiera den bilddel vi vill använda
  • background: url(navsprites.gif) 0 0; - Definiera bakgrundsbilden och dess position (left 0px, top 0px)

Bilder sprite - Skapa en navigationslista

Vi vill använda spritebilder ("navsprites.gif") för att skapa en navigationslista.

Vi kommer att använda HTML-lista eftersom den kan vara länkar och stödjer bakgrundsbilder:

Exempel

#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;
}

Try it yourself

Example explanation:

  • #navlist {position:relative;} - Position sät till relativ för att tillåta absolut positioning inuti
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Sätt margn och padding till 0, ta bort list-style och alla listobjekt är absolut positionerade
  • #navlist li, #navlist a {height:44px;display:block;} - Allas höjd är 44px

Nu börjar vi sätta inrättning och stil för varje specifik del:

  • #home {left:0px;width:46px;} - Placera alltid till vänster, bildbredd 46px
  • #home {background:url(navsprites.gif) 0 0;} - Definiera bakgrundsbilden och dess position (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Placera till höger 63px (#home bredd 46px + lite extra utrymme mellan objekten), bredd 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Definiera bakgrundsbilden till höger 47px (#home bredd 46px + 1px avstånd)
  • #next {left:129px;width:43px;} - Placera till höger 129px (#prev börjar med 63px + #prev bredd är 43px + extra utrymme), bredd 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Definiera bakgrundsbilden till höger 91px (#home bredd 46px + 1px avstånd + #prev bredd 43px + 1px avstånd)

Image sprite - hover-effekt

Nu lägger vi till hover-effekten till navigationslistan.

Tips::hover-väljaren kan användas för alla element, inte bara länkar.

Vår nya bild ("navsprites_hover.gif") innehåller tre navigeringsbilder och tre bilder för hover-effekten:

Navigationsbilder

Eftersom detta är en bild, inte sex enskilda filer, så när användaren håller muspekaren över bilden:Det kommer inte att finnas laddningssening.

Vi lägger till endast tre rader kod för att uppnå hover-effekten:

Exempel

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

Try it yourself

Example explanation:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - We specify the same background position for all three hover images, just 45 pixels down