css sprite技巧詳解

時間 2019-11-20

標籤 css sprite 技巧詳解欄目 CSS 简体版

原文原文鏈接

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">
Join us on:
<ul class="c">
<li><a href="https://www.facebook.com/Fancyladies">Facebook</a></li>
<li><a href="http://pinterest.com/fancyladies/ ">Pinterest</a></li>
<li><a href="https://twitter.com/fancyladiescorp">Twitter</a></li>
<li><a href="http://www.flickr.com/photos/fancyladies">flickr</a></li>
<li><a href="http://www.youtube.com/user/fancyladiescom">Youtube</a></li>
<li><a href="http://www.fancyladies.com/blog/">Blog</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>
<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;}http://www.huiyi8.com/hunsha/婚紗攝影
.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的工具雖然挺好，可是我沒用過，我一直都用我本身的這套，我本身在實踐中感受挺方便的，所要分享下。css

1. background-size之CSS Sprite巧用
2. 前端小技巧：css sprite----V客學院技術分享
3. css sprite、background-size、Retina屏幕詳解
4. CSS Sprite切圖技術
5. CSS精靈技術（sprite）
6. 詳解 CSS 居中佈局技巧
7. css sprite
8. CSS Sprite
9. CSS sprite
10. CSS Sprite（CSS貼圖）
更多相關文章...
• Markdown 高級技巧 - Markdown 教程
• 免費ARP詳解 - TCP/IP教程
• Flink 數據傳輸及反壓詳解
• 三篇文章瞭解 TiDB 技術內幕——說存儲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。