image sprites 圖像精靈
圖像精靈是單個(gè)圖像中包含的圖像集合
包含許多圖像的網(wǎng)頁(yè)可能需要很長(zhǎng)時(shí)間才能加載，同時(shí)會(huì)生成多個(gè)服務(wù)器請(qǐng)求
使用圖像精靈將減少服務(wù)器請(qǐng)求的數(shù)量并節(jié)約帶寬
通過(guò)使用 CSS，我們可以?xún)H顯示所需圖像的某個(gè)部分
在下面的例子中，CSS 指定了顯示 “navsprites.gif” 圖像的哪部分
<!--
<img id="home" src="trans.gif"> - 僅定義小的透明圖像，因?yàn)?src 屬性不能為空
而實(shí)際顯示的圖像將是我們?cè)?CSS 中指定的背景圖像
width: 46px; height: 44px; - 定義我們要使用的圖像部分
background: url(navsprites.gif) 0 0; - 定義背景圖片及其位置（left 0px, top 0px）
-->
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 45px;
height: 42px;
background: url(/i/css/navsprites.gif) -44.5px 0;
}
#next {
width: 45px;
height: 42px;
background: url(/i/css/navsprites.gif) -90px 0;
}
</style>
</head>
<body>
<img id="home" src="/i/css/trans.gif" width="1" height="1">
<br>
<img id="next" src="/i/css/trans.gif" width="1" height="1">
</body>
</html>
通過(guò)圖像精靈創(chuàng)建導(dǎo)航列表
希望使用精靈圖片（“navsprites.gif”）來(lái)創(chuàng)建一個(gè)導(dǎo)航列表
我們將使用 HTML 列表，因?yàn)樗梢允擎溄?，同時(shí)還支持背景圖片文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-528468.html
<!--
- #navlist {position:relative;} - 位置設(shè)置為相對(duì)，以允許在其中進(jìn)行絕對(duì)定位
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外邊距和內(nèi)邊距設(shè)置為 0，刪除 list-style，并且所有列表項(xiàng)都均為絕對(duì)定位
- #navlist li, #navlist a {height:44px;display:block;} - 所有圖片的高度均為 44px
為每個(gè)特定部分設(shè)置定位和樣式
- #home {left:0px;width:46px;} - 一直向左定位，圖像寬度 46px
- #home {background:url(navsprites.gif) 0 0;} - 定義背景圖片及其位置（left 0px, top 0px）
- #prev {left:63px;width:43px;} - 向右定位 63px（#home 寬度 46px + 項(xiàng)目之間的一些額外空間），寬度 43px
- #prev {background:url('navsprites.gif') -47px 0;} - 定義背景圖片向右 47px（#home 寬度 46px + 1px 分隔線）
- #next {left:129px;width:43px;} - 向右定位 129px（#prev 開(kāi)始是 63px + #prev 的寬度是 43px + 多余的空格），寬度 43px
- #next {background:url('navsprites.gif') -91px 0;} - 定義背景圖片向右 91px（#home 寬度 46px + 1px 分隔線+ #prev 寬度 43px + 1px 分隔線）
-->
<!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: 43px;
background: url('/i/css/navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 42px;
background: url('/i/css/navsprites.gif') -91px 0;
}
#next {
left: 129px;
width: 42px;
background: url('/i/css/navsprites.gif') -47px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="/css/index.asp"></a></li>
<li id="prev"><a href="/css/css_syntax.asp"></a></li>
<li id="next"><a href="/css/css_jianjie.asp"></a></li>
</ul>
</body>
</html>
圖像精靈的懸停效果
向?qū)Ш搅斜碇刑砑討彝ＰЧ?br> :hover 選擇器可用于所有元素，而不僅限于鏈接
我們的新圖像（“navsprites_hover.gif”）包含三幅導(dǎo)航圖像和三幅用于懸停效果的圖像
因?yàn)檫@是一幅圖像，而不是六個(gè)單獨(dú)的文件，所以當(dāng)用戶(hù)將鼠標(biāo)懸停在圖像上時(shí)，不會(huì)有加載延遲
在前面的基礎(chǔ)上只需要加三行代碼即可（當(dāng)然最好把上面的背景鏈接統(tǒng)一改為navsprites_hover.gif）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-528468.html
/*
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我們?yōu)樗腥齻€(gè)懸停圖像指定相同的背景位置，僅向下 45 像素
*/
#home a:hover {
background: url('/i/css/navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('/i/css/navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('/i/css/navsprites_hover.gif') -91px -45px;
}
到了這里，關(guān)于【CSS 16】image sprites 圖像精靈 圖像精靈導(dǎo)航列表 圖像精靈懸停效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
