這段時間有幾次接觸到了css sprites的概念，一個就是在用css做滑動門的時候，另外一個就是在用YSlow分析網站效能的時候，於是對css sprites這個概念產生了濃厚的興趣。在網上尋找了很多的資料，但可惜的是大部分都是隻言片語，其中很多都是直接翻譯國外的資料，也有直接推薦國外的資料網站，無奈英語沒有過關，基本上沒有理解到什麼css sprites，更別談如何使用了。
最後還是在藍色理想中的一篇文章受到啟發，琢磨了老半天，才算弄清楚裡面的內涵，下面將通過本人的理解協助其他人更加快速的去掌握css sprites。
先簡單介紹下概念，關於它的概念，網上那到處都是，這裡簡單的提下。
什麼是css sprites
css sprites直譯過來就是CSS精靈，但是這種翻譯顯然是不夠的，其實就是通過將多個圖片融合到一副圖裡面，然後通過CSS的一些技術布局到網頁上。這樣做的好處也是顯而易見的，因為圖片多的話，會增加http的請求，無疑促使了網站效能的減低，特別是圖片特別多的網站，如果能用css sprites降低圖片數量，帶來的將是速度的提升。
下面我們來用一個執行個體來理解css sprites，受藍色理想中的《製作一副撲克牌系列教程》啟發。
我們僅僅只需要製作一個撲克牌，拿黑桃10為例子。
可以直接把藍色理想中融合好的一幅大圖作為背景，這也是css sprites的一個中心思想，就是把多個圖片融進一個圖裡面。
這就是融合後的圖，相信對PS熟悉的同學應該很容易的理解，通過PS我們就可以組合多個圖為一個圖。
現在我們書寫html的結構：
<div class="card">
<div class="front">
<b class="N1 n10"></b>
<em class="First small_up1"></em>
<span class="A1 up1"></span>
<span class="A2 up1"></span>
<span class="A3 down1"></span>
<span class="A4 down1"></span>
<span class="B1 up1"></span>
<span class="B2 down1"></span>
<span class="C1 up1"></span>
<span class="C2 up1"></span>
<span class="C3 down1"></span>
<span class="C4 down1"></span>
<em class="Last small_down1"></em>
<b class="N2 n10_h"></b>
</div>
</div>
在這裡我們來分析強調幾點:
一：card為這個黑桃十的盒子或者說快，對div瞭解的同學應該很清楚這點。
二：我用span,b,em三種標籤分別代表三種不同類型的圖片，span用來表標中間的圖片，b用來表示數定，em用來表示數字下面的小表徵圖。
三：class裡面的聲明有2種，一個用來定位黑桃10中間的圖片的位置，一個用來定義方向（朝上，朝下）。
上面是DIV基本概念，這還不是重點，不過對DIV不太清楚的同學可以瞭解。
下面我們重點談下定義CSS：
span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}
這個是對span容器的CSS定義，其他屬性就不說了，主要談下如何從這個裡面來理解css sprites。
背景圖片，大家看地址就是最開始我們融合的一張大圖，那麼如何將這個大圖中的指定位置顯示出來呢？因為我們知道我們做的是黑桃10，這個大圖其他的映像我們是不需要的，這就用到了css中的overflow:hidden;
但大家就奇怪了span的CSS定義裡面沒有overflow:hidden啊，別急，我們已經在定義card的CSS裡面設定了（這是CSS裡面的繼承關係）：
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
理解到這點還不夠，還要知道width:125px;height:170px; 這個可以理解成是對這個背景圖片的準確切割，當然其實並不是切割，而是把多餘其他的部分給隱藏了，這就是overflow:hidden的妙用。
通過以上的部分的講解，你一定可以充分的把握css sprites的運用，通過這個所謂的“切割”，然後再通過CSS的定位技術將這些圖準確的分散到這個card裡面去！
PS:CSS的定位技術，大家可以參考其他資料，例如相對定位和絕對位置，這裡我們只能嘗試用絕對位置。
最後我們來補充一點：
為什麼要採取<span class="A1 up1"></span>這樣的結構？
span這個容器是主要作用就是存放這張大的背景圖片，並在裡面實現”切割“，span裡面切割後的背景是所有內容塊裡面通用的！
後面class為什麼要聲明2個屬性？
很顯然，一個是用來定位內容塊的位置，一個是用來定義內容塊中的映像的朝上和朝下，方位的！
下面我們附上黑桃10的完整源碼：
<!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>製作一幅撲克牌--黑桃10</title>
<style type="text/css"><!--
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中間圖片通用設定*/
span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}
/*小圖片通用設定*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; overflow:hidden;}
/*數字通用設定*/
em{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;overflow:hidden;}
/*各座標點位置*/
.N1{left:1px;top:8px;}
.First{left:5px;top:20px;}
.A1{left:20px;top:20px;}
.A2{left:20px;top:57px;}
.A3{left:20px;top:94px;}
.A4{left:20px;top:131px;}
.B1{left:54px;top:38px;}
.B2{left:54px;top:117px;}
.C1{left:86px;top:20px;}
.C2{left:86px;top:57px;}
.C3{left:86px;top:94px;}
.C4{left:86px;top:131px;}
.Last{bottom:20px;right:0px;}
.N2{bottom:8px;right:5px;
}
/*大表徵圖黑紅梅方四種圖片-上方向*/
.up1{background-position:0 1px;}/*黑桃*/
/*大表徵圖黑紅梅方四種圖片-下方向*/
.down1{background-position:0 -19px;}/*黑桃*/
/*小表徵圖黑紅梅方四種圖片-上方向*/
.small_up1{background-position:0 -40px;}/*黑桃*/
/*小表徵圖黑紅梅方四種圖片-下方向*/
.small_down1{background-position:0 -51px;}/*黑桃*/
/*A~k數字圖片-左上方*/
.n10{background-position:-191px 0px;left:-4px;width:21px;}
/*A~k數字圖片-右下角*/
.n10_h{background-position:-191px -22px;right:3px;width:21px;}
/*A~k數字圖片-左上方紅色字*/
.n10_red{background-position:-191px 0px;}
/*A~k數字圖片-右下角紅色字*/
.n10_h_red{background-position:-191px -33px;}
-->
</style>
</head>
<body>
<!--10字元-->
<div class="card">
<div class="front">
<b class="N1 n10"></b>
<em class="First small_up1"></em>
<span class="A1 up1"></span>
<span class="A2 up1"></span>
<span class="A3 down1"></span>
<span class="A4 down1"></span>
<span class="B1 up1"></span>
<span class="B2 down1"></span>
<span class="C1 up1"></span>
<span class="C2 up1"></span>
<span class="C3 down1"></span>
<span class="C4 down1"></span>
<em class="Last small_down1"></em>
<b class="N2 n10_h"></b>
</div>
</div>
</body>
</html>
最後感謝藍色理想提供的參考資料！
作者：老千@武漢seo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
