CSS Image Sprites


Innehållsförteckning

    Visa innehållsförteckning


Bild Sprites

En bildsprite är en samling bilder som placeras i en enda bild.

En webbsida med många bilder kan ta lång tid att ladda och generera flera serverförfrågningar.

Att använda bildsprites kommer att minska antalet serverförfrågningar och spara bandbredd.


Image Sprites - Enkelt exempel

Istället för att använda tre separata bilder använder vi den här enstaka bilden ("img_navsprites.gif"):

Med CSS kan vi visa just den del av bilden vi behöver.

I följande exempel anger CSS vilken del av "img_navsprites.gif" bild att visa:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>


Exempel förklarat:

<img id="home" src="img_trans.gif">

- Definierar bara en liten transparent bild eftersom src-attributet inte kan vara tomt. Den visade bilden kommer att vara bakgrundsbilden vi anger i CSS

width: 46px; height: 44px;

- Definierar den del av bilden vi vill använda

background: url(img_navsprites.gif) 0 0;

- Definierar bakgrundsbilden och dess position (vänster 0px, topp 0px)

Det här är det enklaste sättet att använda bildsprites, nu vill vi utöka det genom att använda länkar och hovringseffekter.


Image Sprites - Skapa en navigeringslista

Vi vill använda sprite-bilden ("img_navsprites.gif") för att skapa en navigeringslista.

Vi kommer att använda en HTML-lista, eftersom den kan vara en länk och även stöder en bakgrundsbild:

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>


Exempel förklarat:

#navlist {position:relative;}

- positionen är inställd på relativ för att tillåta absolut positionering inuti den

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

- Marginal och utfyllnad är inställda på 0, liststil tas bort och alla listobjekt är absolut positionerade

#navlist li, #navlist a {height:44px;display:block;}

- höjden på alla bilder är 44px

Börja nu att positionera och stil för varje specifik del:

#home {left:0px;width:46px;}

- Placerad hela vägen till vänster, och bildens bredd är 46px

#home {background:url(img_navsprites.gif) 0 0;}

- Definierar bakgrundsbilden och dess position (vänster 0px, topp 0px)

#prev {left:63px;width:43px;}

- Placerad 63px till höger (#hembredd 46px + lite extra utrymme mellan objekt), och bredden är 43px

#prev {background:url('img_navsprites.gif') -47px 0;}

- Definierar bakgrundsbilden 47px till höger (#hembredd 46px + 1px linje delare)

#next {left:129px;width:43px;}

- Placerad 129px till höger (början av #prev är 63px + #prev width 43px + extra utrymme), och bredden är 43px

#next {background:url('img_navsprites.gif') -91px 0;}

- Definierar bakgrundsbilden 91px till höger (#hembredd 46px + 1px linjeavdelare + #föregående bredd 43px + 1px linjeavdelare)



Bild Sprites - Hover Effect

Nu vill vi lägga till en hovringseffekt till vår navigeringslista.

Tips: :hover-väljaren kan användas på alla element, inte bara på länkar.

Vår nya bild ("img_navsprites_hover.gif") innehåller tre navigeringsbilder och tre bilder att använda för svävningseffekter:

Eftersom detta är en enda bild och inte sex separata filer, kommer det att finnas nr laddningsfördröjning när en användare håller muspekaren över bilden.

Vi lägger bara till tre rader kod för att lägga till hovringseffekten:

Exempel

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px 
-45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px 
-45px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>


Exempel förklarat:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- För alla tre svävande bilder anger vi samma bakgrundsposition, endast 45px längre ner