css sprites精靈圖、css圖片整合、css貼圖定位案例教程

01-31

一、 什麼是css sprites

CSS Sprites通常被稱為css精靈圖，在國內也被意譯為css圖片整合和css貼圖定位，也有人稱他為雪碧圖。就是將導航的背景圖，按鈕的背景圖等有規則的合併成一張背景圖，即多張圖合併為一張整圖，然後再利用background-position進行背景圖定位的一種技術。

二、為什麼需要css sprites

CSS Sprites 並不是一門新的技術了，目前他發展的已經比較成熟，阿里巴巴、百度、谷歌等各公司的網頁中到處都可以發現CSS Sprites 的影子。他是網頁里常見的一種圖片應用處理方式，他允許你將一個頁面里所涉及到的所=有的零星的圖片都整合到一張大圖中去，這樣一來，當訪問這個頁面時，所載入的圖片就不會像以前那樣一張一張的慢慢顯示出來了，對於當前的網路所流行的速度來說，不超出200kb的單張圖片所需要的載入時間基本是差不多的，節省載入速度的關鍵不是降低重量，而是減少個數，就因為計算機都是按照byte計算。頁面每顯示一張圖片都會向伺服器發送一次請求。所以，圖片越多，所請求的次數就越多。為了減少HTTP的請求次數，很多網站的導航背景圖、登錄框、按鈕背景圖等並不使用

很多網站的導航欄圖標、登錄框圖片等，使用的並不是<img>標籤，而是CSS Sprite。本課程分析了CSS Sprite的實現原理，詳細講解製作方法，實現完整效果，讓你快速掌握CSS Sprite技術。

三、CSS Sprites的優勢

在很多情況下，它有著一定的優勢，最重要的是它可以減輕伺服器的負擔，提高網頁的載入速度。

因為假我們現在有9張小圖片，（例1）那麼就會就有9個HTTP請求，但是如果把這九張小圖放在一張大圖裡，那就只需要請求1次，因為你要的9個小圖都在一張大圖裡了，請求一次後不用再次發送HTTP請求去請求圖片資源。

例1.

當頁面載入時，不是去載入每一個單獨的圖片，而是一次載入整個組合圖片。它大大減少了HTTP請求的次數，減輕伺服器的壓力，同時也縮短了懸停時候載入圖片所需要的時間延遲，使效果更流暢。

隨著頁面設計向著精緻、巧妙的方向發展，便開始考慮用非Js的方法製作滑鼠滑過、懸停菜單的效果，這時精靈圖應運而生。

先看效果：

首先，是在正常模式下瀏覽：

然後，是在滑鼠懸停的時候瀏覽：

最後，是在滑鼠點擊鏈接的時候瀏覽：

這樣過渡的非常自然。具體用到的圖片如下：

其實，剛才的滑鼠懸停和點擊鏈接的圖片切換，就是通過位置控制取自bg2_btn.jpg，下面是具體實現方法：

首先是html頁面源代碼：

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> n<html xmlns="http://www.w3.org/1999/xhtml"> n<head> n<title>nav</title> n<link href="mydemo.css" rel="stylesheet" type="text/css" /> n</head> n<body> n<div> n <img src="image/logo/logo2.jpg" alt="wenqis blog" /> n</div> n n<div class="menu2"> n <div class="left2"></div> n <div class="center2"> n <a href="#">Blog</a> n <a href="#">Themes</a> n <a href="#">Service</a> n <a href="#">About</a> n <a href="#">Help</a> n </div> n <div class="right2"></div> n <div class="clear"></div> n</div> n</body> n</html> nn其次就是css的代碼： nn代碼如下:nnhtml n{ nwidth:100%; nheight:100%; n} nbody n{ nbackground-color:#fff; nfont-size:18px; nfont-family:"Arial","Tahoma","微軟雅黑","雅黑"; nline-height:18px; npadding:0px; nmargin:0px; ntext-align:center; n} n/* www.codefans.net */ na n{ ndisplay:block; nfloat:left; n} ndel,div.clear n{ nheight:0px; nfont-size:0px; nline-height:0px; npadding:0px; nmargin:0px; ndisplay:block; nclear:both; noverflow:hidden; n} ndiv n{ nwidth:550px; ntext-align:left; nmargin:auto auto auto auto; n} n.menu2 n{ nfont-size:14px; nline-height:14px; nmargin-bottom:24px; n} n.menu2 .left2 n{ nwidth:5px; nheight:47px; nbackground:url("image/navigation/bg2_left.jpg") no-repeat left top; nfloat:left; n} n.menu2 .center2 n{ nwidth:540px; nheight:47px; nbackground:url("image/navigation/bg2_center.jpg") repeat-x left top; nfloat:left; n} n.menu2 .right2 n{ nwidth:5px; nheight:47px; nbackground:url("image/navigation/bg2_right.jpg") no-repeat left top; nfloat:left; n} n.menu2 a:link,.menu2 a:visited n{ ncolor:#585858; nwidth:77px; nheight:30px; npadding-top:17px; nbackground:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; ntext-align:center; ntext-decoration:none; n} n.menu2 a:hover n{ ncolor:#fff; nbackground-position:left 0px; n} n.menu2 a:active n{ ncolor:#fff; nbackground-position:left -47px; n} n

其實主要的是這一段：

代碼如下:

.menu2 a:link,.menu2 a:visited n{ ncolor:#585858; nwidth:77px; nheight:30px; npadding-top:17px; nbackground:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; ntext-align:center; ntext-decoration:none; n} n

利用了圖片整合圖，將圖片經過準確的切割，而且使用background-position來控制，就可以做到js的控制效果。

要做出這種效果還要學習怎樣把小圖排版成大圖，以便於更容易去測量位置，且不會互相影響。

例2.

谷歌：

土豆：

淘寶：

其中小圖之間的排版是有些點規律的，比如說淘寶這張，類似的小圖都放置成同一列，這樣就計算小圖顯示位置的時候，只需要知道第一個小圖標的位置就可以了，同一列的小圖， X坐標一樣，只需要改Y坐標的位置。這樣就方便了許多。用到的css屬性是background-image、background-position、background-repeat、這幾個屬性。或者使用background這個複合屬性寫在一起就好。

利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；個人認為CSS Sprites能減少圖片的位元組，我曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。

四、css sprites實例示例教程

1、素材與要實現的效果

2、sprites實例教程解釋介紹

首先這些素材圖標都是用ps放在同一張圖片上，然後實現成列表類布局。使用css sprites實現此布局然後使用background樣式進行實現。

此導航的布局我們使用ul 無序列表進行布局，每個li站一行排版，對ul設置padding實現四周內容與邊框一定間距效果，因為每個li前面圖標不同，但此背景圖片是拼合在一張圖片上，所以這裡做li里開始使用SPAN標籤實現不同圖標的效果，每個列表項的圖標不相同為了區別所以對span設置不同class名，不同class對應設置定位相應的圖標。

3、實例教程準備 1）、圖標素材，這裡直接為大家提供拼接好的圖標素材圖片一張，命名為「bg.png」，如下圖，可直接另存為保存使用。

4、先寫布局，再css sprites設置不同背景圖標樣式

html代碼：

<ul class="Sprite"> n <li><span class="a1"></span><a href="#">我的主頁</a></li> n <li><span class="a2"></span><a href="#">新聞頭條</a></li> n <li><span class="a3"></span><a href="#">電視劇</a></li> n <li><span class="a4"></span><a href="#">最新電影</a></li> n <li><span class="a5"></span><a href="#">小說大全</a></li> n <li><span class="a6"></span><a href="#">旅遊度假</a></li> nn</ul> n

為了區別不同效果，對不同的span標籤加入不同的class名稱。

css代碼：

ul { margin:0 auto;border:1px solid #F00;width:300px; padding:10px;} nul li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden; float:left;} nul li span{ float:left; width:17px;padding-top:5px;height:17px; noverflow:hidden;background:url(bg.png) no-repeat} nul li a{ padding-left:5px}n

css sprite關鍵代碼與解釋

首先在ul li span里插入背景圖 ul.Sprites li span{ background:url(bg.png) no-repeat} 給span設置背景圖片。再分別對不同span class設置對於圖標背景定位具體值 ul li .a1{ background-position: -62px -32px}設置背景圖片作為對應盒子對象背景後向左「移動」62px，向上「移動」32px開始顯示此背景圖標 ul li .a2{ background-position: -86px -32px}設置背景圖片作為對應盒子對象背景後向左「移動」86px，向上「移動」32px開始顯示此背景圖標 ul li .a3{ background-position: -110px -32px}設置背景圖片作為對應盒子對象背景後向左「移動」110px，向上「移動」32px開始顯示此背景圖標 ul li .a4{ background-position: -133px -32px}設置背景圖片作為對應盒子對象背景後向左「移動」133px，向上「移動」32px開始顯示此背景圖標 ul li .a5{ background-position: -158px -32px}設置背景圖片作為對應盒子對象背景後向左「移動」158px，向上「移動」32px開始顯示此背景圖標

重點：背景background-position屬性有兩個值，第一個代表水平位置的值（可為正可為負），第二個代表垂直方向的值（可為正可為負），當為正數時，代表背景圖片作為對象盒子背景圖片時靠左和靠上多少開始顯示背景圖片；當為負數時代表背景圖片作為盒子對象背景圖片，將背景圖片超出盒子對象左邊多遠，超出盒子對象上邊多遠開始顯示此背景圖片。

CSS sprites技巧技術總結

CSS sprites其實就是對background樣式的擴展應用，以前設置背景圖位置時常見為正數，設置背景靠左靠上距離多少像px開始顯示圖片，為負數值後，是將圖片拖離左邊上邊多少像素開始顯示圖片，同時需要學會photoshop工具精確量出距離值。