CSS 圖像精靈
Image Sprite
Ang image sprite ay ang koleksyon ng mga image na naka-include sa isang single image.
Ang web page na naglalaman ng maraming image ay maaaring magkakaroon ng mahabang oras para maladlad, at magbuo ng maraming request sa server.
Ang paggamit ng image sprite ay magbabawas sa bilang ng mga request sa server at mag-iwas sa pagkakaroon ng bandwidth.
Image Sprite - Simple Example
Gumamit kami ng isang single image ("navsprites.gif") sa halip ng tatlong magkakahiwalay na image:
Gumamit ng CSS, maaari naming ipakita lamang ang bahagi ng image na kailangan namin ipakita.
Sa mga sumusunod na halimbawa, ang CSS ay naitakda na ipakita ang anong bahagi ng image na "navsprites.gif":
Sample
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
Paliwanag ng Halimbawa:
<img id="home" src="trans.gif">- Tukuyin lamang ang maliit na image na mapapanggitain, dahil ang src na attribute ay hindi dapat maging walang laman. Ang aktwal na ipapakita na image ay ang background na image na naitakda namin sa CSS.width: 46px; height: 44px;- Tukuyin ang bahagi ng image na gagamitin naminbackground: url(navsprites.gif) 0 0;- Tukuyin ang background na image at ang kanyang posisyon (left 0px, top 0px)
Image Sprite - Lumikha ng Navigation List
Nais naming gamitin ang image na sprite ("navsprites.gif") upang lumikha ng isang navigation list.
Kami ay gagamitin ang HTML na listahan, dahil maaari itong maging link, at sumusuporta sa background na image:
Sample
#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;
}
Paliwanag ng Halimbawa:
- #navlist {position:relative;} - Ang posisyon ay itinakda na relatibong, upang magamit ang absolute na lokasyon dito
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Sets margin and padding to 0, removes list-style, and all list items are absolute positioning
- #navlist li, #navlist a {height:44px;display:block;} - All images have a height of 44px
Now start setting positioning and styles for each specific section:
- #home {left:0px;width:46px;} - Continuously positions to the left, image width 46px
- #home {background:url(navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
- #prev {left:63px;width:43px;} - Positions to the right by 63px (#home width 46px + some extra space between items), width 43px.
- #prev {background:url('navsprites.gif') -47px 0;} - Defines the background image to the right by 47px (#home width 46px + 1px separator)
- #next {left:129px;width:43px;} - Positions to the right by 129px (#prev starts at 63px + #prev width is 43px + some extra space), width 43px.
- #next {background:url('navsprites.gif') -91px 0;} - Defines the background image to the right by 91px (#home width 46px + 1px separator + #prev width 43px + 1px separator)
Image sprite - Hover effect
Now, we will add a hover effect to the navigation list.
Tip::hover selector can be used for all elements, not just links.
Our new image ("navsprites_hover.gif") contains three navigation images and three images for hover effects:
Because this is an image, not six separate files, so when the user hovers over the image,There will be no loading delay.
We only add three lines of code to achieve the hover effect:
Sample
#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;
}
Paliwanag ng Halimbawa:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Nagsasagawa kami ng parehong background position para sa tatlong hover image, lamang 45 pixel sa ilalim
