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.
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:
#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.
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:
#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)
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:
#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