css sprite技巧详解
1. [代碼][CSS]代碼 ? ??
CSSSprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。 加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。所以，圖片越多請求次數越多，造成延遲的可能性也就越大。
?
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
?
下面我就詳細的講解下他的使用技巧，包你現在不懂的童鞋會有個清楚的全新了解，雖然目前有這樣的工具，但是還是要先清楚他的原理，技巧性的來做也會很快速的完成定位，下面我分享加個案例。
?
首先跟大家說明一點，由于需要定位的背景都是合并在一張圖的，所以都是一刀切的，要么是X軸坐標一致要么是Y軸坐標一致，也就有了我下面要講述的2種類型了。
?
1。橫向定位坐標
?
橫向定位坐標意思就是Y軸坐標固定,它的特點就是每個圖標的高度是一致的，通過改變x坐標的位置來改變背景。只需測量每個圖標的寬度就可以知道x軸的坐標了。如果你還不知道這個規律，下面我就講解給你聽吧，下面拿我做的2個案例來說事。
?
效果圖：
?
http://m1.img.libdd.com/farm5/2012/0828/08/1F97A4B232E0D41ECD68D52EBE037A9555BBCB189977_500_22.jpg
?
?
實際背景圖：
http://m1.img.libdd.com/farm5/2012/0828/08/A2E67666F292DF6649411ED2851CEFE87EDCFC5EF698_404_46.JPEG
?
?
?
那么具體來講解怎么來定位，這里是改變X坐標來定位。
?
由于高度都是一樣所以Y軸上的坐標都是0或top
?
這里每個圖標我是用一個span做背景的，下面具體分析下代碼：
?
<div class="join c">
? ? ? ? ? ? <strong>Join us on:</strong>
? ? ? ? ? ? <ul class="c">
? ? ? ? ? ? ? ? <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
? ? ? ? ? ? ? ? <li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
? ? ? ? ? ? ? ? <li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
? ? ? ? ? ? ? ? <li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span ?class="sharelogo flickrLogo"></span></a></li>
? ? ? ? ? ? ? ? <li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
? ? ? ? ? ? ? ? <li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
下面是Css ?code:
?
.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
?
.facebookLogo{background-position:0 0;width:20px;}
?
.pinterestLogo{background-position:-20px 0;width:42px;}
?
.twitterLogo{background-position:-62px 0;width:30px;}/**/
?
.flickrLogo{background-position:-92px 0;width:130px;}
?
.youtubeLogo{background-position:-222px 0;width:98px}
?
.blogLogo{background-position:-320px 0;width:84px;}
?
.sl{float:left;padding-right:10px;}
?
他們的背景圖片都是公用這一張背景：background-image:url(../images/shareIcon.jpg);
?
每個元素的背景都不允許重復：即：background-repeat:no-repeat;
?
讀到這里你有發現一個規律，就是每個元素的坐標等于前面元素的坐標值加上寬度。即元素的橫向坐標值公式等于。相鄰元素的坐標值加上寬度。
?
pinterestLogo 的值等于facebookLogo的坐標值20px+facebookLogo的寬度20px ;是不是很簡單啊，只要你知道元素的寬度就可以，因為橫向坐標等必須要給個固定的寬度，所以這一步測量寬度不是浪費時間。希望仔細看源碼中坐標值的規律。
?
不管是橫向定位與縱向定位坐標的時候，他們的起始位置都是background-position:0 ?0;而橫向定位的時候高度是固定的，所以每次只需改變X坐標的值就實現了。
?
比如facebook的logo是起始位置的圖標，所以它的坐標值是0,0，就實現了它的定位。
?
那么pinterest的logo是它的下面一個，就是從facebook的寬度負值算起。由于facebook的寬度是21px;所以pinterest的logo坐標就是background-position:-20px 0; 下面以此類推
?
twitterLogo 是pinterstLogo的下面一個，那么就是用pinterstLogo的坐標值加上pinterstlogo
?
的寬度,就得到了twitterLogo的坐標位置了。就是-（20px+42px）=-62px;即twitterLogo 的坐標值為.twitterLogo{background-position:-62px 0;width:30px;}
?
讀到這里你有發現一個規律，就是每個相鄰元素的坐標等于前面元素的坐標值加上它前面元素的寬度。即元素的橫向坐標值公司等于。相鄰元素的坐標值加上它的寬度。好了下面講第二種方案了。
?
2.縱向定位坐標
?
縱向定位坐標就是X軸坐標固定，改變Y軸坐標值來實現背景的改變，他們的寬度是固定的，所以他們的X軸坐標始終都是相同的，即0或left。下面我分享個案例
?
效果圖：
?
http://m3.img.libdd.com/farm5/2012/0828/21/2F59B3DC34AD60610C0CC7BDE87645D4C4799F5EF698_81_255.JPEG
?
?
實際背景圖片：
http://m1.img.libdd.com/farm5/2012/0828/21/641A797EC6A263EAE69FE1A6D81BB0945AEB839BE40C_32_148.JPEG
?
Css code:
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>http://www.huiyi8.com/lingsheng/?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">手機鈴聲
ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}
.p{background-position:0 -32px;height:20px}/*Y軸坐標等于起始位置的高度 即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y軸坐標加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y軸坐標加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y軸坐標加上前面元素的高度，即：-（84+32）*/
</style>
</head>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
<body>
<ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
<li class="f"></li>
<li class="p"></li>
<li class="fr"></li>
<li class="h"></li>
<li class="t"></li>
</ul>
</body>
</html>
3.寬度和高度都相等的時候，那是最好不過了，直接做乘法，相信你的數學能力一家過了小學3年級了，Ok，還是來分享下吧。
?
1.寬度高度想等的情況下等位X軸坐標，這種情況通常都出現在一組按鈕下，鼠標滑過和點擊時候的背景改變。這種情況我也總結出來了，有公式：
?
X軸坐標=-n（起始位置+寬度）.
?
其中n值從0開始。即所有的起始位置的坐標都是0,0開始起。下面依次類推。
?
比如你現在所要定位的元素是第3個，假設我們這里的圖標的寬度為30px.那么他的X軸坐標就等于。x=-3*(0+30px);
?
Y軸的坐標=-n(起始位置+高度)
?
比如你現在所要定位的圖標為第6個位置，假設這里的高度也是32px;那么他的Y軸坐標就是
?
Y=-6（0+32px）=-192px. ? 哈哈，當然有許多的工具，那個叫什么gaga的工具雖然挺好，但是我沒用過，我一直都用我自己的這套，我自己在實踐中感覺挺方便的，所要分享下。
轉載于:https://www.cnblogs.com/xkzy/p/3975223.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的css sprite技巧详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Google IP
- 下一篇： Window Server 2008 R