CSS Beeld Sprites
Beeld Sprites
'n Beeld-sprite is 'n versameling beelde wat in 'n enkele beeld geplaas word.
'n Webbladsy met baie beelde kan lank neem om te laai en genereer verskeie bedienerversoeke.
Die gebruik van beeldsprites sal die aantal bedienerversoeke verminder en bandwydte bespaar.
Beeld Sprites - Eenvoudige Voorbeeld
In plaas daarvan om drie afsonderlike beelde te gebruik, gebruik ons hierdie enkele beeld ("img_navsprites.gif"):
Met CSS kan ons net die deel van die beeld wys wat ons nodig het.
In die volgende voorbeeld spesifiseer die CSS watter deel van die "img_navsprites.gif" beeld om te wys:
Voorbeeld
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Voorbeeld verduidelik:
<img id="home" src="img_trans.gif">- Definieer slegs 'n klein deursigtige beeld omdat die src-kenmerk nie leeg kan wees nie. Die vertoonde prent sal die agtergrondprent wees wat ons in CSS spesifiseerwidth: 46px; height: 44px;- Definieer die gedeelte van die beeld wat ons wil gebruikbackground: url(img_navsprites.gif) 0 0;- Definieer die agtergrondprent en sy posisie (links 0px, boonste 0px)
Dit is die maklikste manier om beeldsprites te gebruik, nou wil ons dit uitbrei deur skakels en hover-effekte te gebruik.
Image Sprites - Skep 'n navigasielys
Ons wil die sprite-beeld ("img_navsprites.gif") gebruik om 'n navigasielys te skep.
Ons sal 'n HTML-lys gebruik, want dit kan 'n skakel wees en ook 'n agtergrondprent ondersteun:
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;
}
Voorbeeld verduidelik:
- #navlist {posisie:relatief;} - posisie is op relatief gestel om absolute posisionering daarin toe te laat
- #navlist li {marge:0;padding:0;list-style:none;position:absolute;top:0;} - kantlyn en opvulling is op 0 gestel, lysstyl word verwyder, en alle lysitems is absoluut geposisioneer
- #navlist li, #navlist a {height:44px;display:block;} - die hoogte van al die prente is 44px
Begin nou om te posisioneer en styl vir elke spesifieke deel:
- #home {left:0px;width:46px;} - Heeltemal na links geposisioneer, en die breedte van die prent is 46px
- #home {agtergrond:url(img_navsprites.gif) 0 0;} - Definieer die agtergrondprent en sy posisie (links 0px, boonste 0px)
- #prev {left:63px;width:43px;} - Geposisioneer 63px na regs (#home width 46px + bietjie ekstra spasie tussen items), en die breedte is 43px.
- #prev {agtergrond:url('img_navsprites.gif') -47px 0;} - Definieer die agtergrondprent 47px na regs (#huiswydte 46px + 1px lynverdeler)
- #next {left:129px;width:43px;}- Geposisioneer 129px na regs (begin van #prev is 63px + #prev width 43px + ekstra spasie), en die breedte is 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Definieer die agtergrondprent 91px na regs (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
Beeld Sprites - Hover Effect
Nou wil ons 'n sweef-effek by ons navigasielys voeg.
Wenk: Die :hoverkieser kan op alle elemente gebruik word, nie net op skakels nie.
Ons nuwe prent ("img_navsprites_hover.gif") bevat drie navigasieprente en drie beelde om vir hover-effekte te gebruik:
Omdat dit een enkele prent is, en nie ses afsonderlike lêers nie, sal daar geen laaivertraging wees wanneer 'n gebruiker oor die prent beweeg nie.
Ons voeg net drie reëls kode by om die sweef-effek by te voeg:
Voorbeeld
#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;
}
Voorbeeld verduidelik:
- #home a:hover {agtergrond: url('img_navsprites_hover.gif') 0 -45px;} - Vir al drie hover-beelde spesifiseer ons dieselfde agtergrondposisie, slegs 45px verder af