CSS Sprites 是一種圖片處理技巧，其實應該寫成 CSS Image Sprites，翻譯成 CSS 圖片精靈，CSS Sprites 的技巧普遍使用於大型網站的網頁元件圖形管理，例如 Google、Amazon.com、Yahoo、YouTube、Groupon ... 等，都有採用 CSS Sprites 技巧，這個技巧的優點在於可以大幅度縮減伺服器的存取次數，假設一個網頁中有 100 個不同的圖形元件，傳統的方式必須向伺服器發出 100 次 requests 才能取得完整的元件組，透過 CSS Sprites 則可以縮減為 1 次 requests 即完成所有圖形元件的取得，等於是讓伺服器的工作量大幅度降低。
CSS Sprites 的運作概念
設計師直接將整個網頁會用到的圖片，組合成 1 張大圖片，當網友開啟網頁時，就將大圖片整個傳至網友的電腦中，再透過 CSS 的圖形大小設定、background 等方式，將大圖片中的每個小圖片獨立出來，填入網頁中要呈現的位置，網站伺服器僅需將 1 張大圖片傳送給網友，其他圖片處理的工作都交由網友的電腦完成，優點是節省伺服器的工作量也相對的減少成本，缺點則是設計師需要花更多時間設計。
CSS Sprites 範例
假設現在有一張完整的圖片如下，圖片名稱就叫做 BigImg.gif。
接著要透過 CSS Sprites 的技術，將三個含有英文字母的藍色方塊換位置，由原本的 ABC 改成 CBA 的排列方式，以下範例程式碼分為 CSS 的圖片處理以及 HTML img 的呈現位置規劃。
範例中共有三個 img 標籤，由於 src 不可以是空白，所以我們用了一個寬與高都是 1px 的透明圖片「替代圖片.png」放到 src 中，這個替代圖片只是用來占位子，因為他會被 BigImg 所拆分出來的部分所取代，CSS Sprites 的重點在於 background 的語法，url 導入大圖片，接著是靠左邊的距離以及靠上方的距離，例如 Img1 寫成「background:url(BigImg.gif) -102px 0px;」代表要從大圖片中，靠左邊 -102px 以及靠上方 0px 的位置開始計算，至於寬度與高度則是 51px 與 50px 的矩形，這樣會取得標有英文字母 C 的藍色方塊，接著就把這個藍色方塊放在網頁中 id=img1 的圖片位置，同樣手法取得另外兩個小圖，並放置於 id=Img2 以及 id=Img3 的位置，三個英文字母位置即更換完成。
備註、以上範例的 BigImg.gif、替代圖片.png 均為示意，範例的用意只是呈現如何透過 CSS Sprites 的技巧，從一張大圖片中，取得所需要的部分，並且放到該呈現圖片的位置，實際應用在一個網頁設計規劃中，還是要由美工設計與程式設計兩個部分的搭配，才能完成這樣的呈現方式，雖然在設計過程需要花上更多的時間，但相對的網站流量越龐大，運用 CSS Sprites 所節省的伺服器工作量就越可觀。
CSS Sprites 的運作概念
設計師直接將整個網頁會用到的圖片，組合成 1 張大圖片，當網友開啟網頁時，就將大圖片整個傳至網友的電腦中，再透過 CSS 的圖形大小設定、background 等方式，將大圖片中的每個小圖片獨立出來，填入網頁中要呈現的位置，網站伺服器僅需將 1 張大圖片傳送給網友，其他圖片處理的工作都交由網友的電腦完成，優點是節省伺服器的工作量也相對的減少成本，缺點則是設計師需要花更多時間設計。
CSS Sprites 範例
假設現在有一張完整的圖片如下，圖片名稱就叫做 BigImg.gif。
接著要透過 CSS Sprites 的技術，將三個含有英文字母的藍色方塊換位置，由原本的 ABC 改成 CBA 的排列方式，以下範例程式碼分為 CSS 的圖片處理以及 HTML img 的呈現位置規劃。
<style>
#Img1{
width:51px;
height:50px;
background:url(BigImg.gif) -102px 0px;
}
#Img2{
width:51px;
height:50px;
background:url(BigImg.gif) -51px 0px;
}
#Img3{
width:51px;
height:50px;
background:url(BigImg.gif) 0px 0px;
}
</style>
<img id="Img1" src="替代圖片.png">
<img id="Img2" src="替代圖片.png">
<img id="Img3" src="替代圖片.png">
呈現結果如#Img1{
width:51px;
height:50px;
background:url(BigImg.gif) -102px 0px;
}
#Img2{
width:51px;
height:50px;
background:url(BigImg.gif) -51px 0px;
}
#Img3{
width:51px;
height:50px;
background:url(BigImg.gif) 0px 0px;
}
</style>
<img id="Img1" src="替代圖片.png">
<img id="Img2" src="替代圖片.png">
<img id="Img3" src="替代圖片.png">
範例中共有三個 img 標籤，由於 src 不可以是空白，所以我們用了一個寬與高都是 1px 的透明圖片「替代圖片.png」放到 src 中，這個替代圖片只是用來占位子，因為他會被 BigImg 所拆分出來的部分所取代，CSS Sprites 的重點在於 background 的語法，url 導入大圖片，接著是靠左邊的距離以及靠上方的距離，例如 Img1 寫成「background:url(BigImg.gif) -102px 0px;」代表要從大圖片中，靠左邊 -102px 以及靠上方 0px 的位置開始計算，至於寬度與高度則是 51px 與 50px 的矩形，這樣會取得標有英文字母 C 的藍色方塊，接著就把這個藍色方塊放在網頁中 id=img1 的圖片位置，同樣手法取得另外兩個小圖，並放置於 id=Img2 以及 id=Img3 的位置，三個英文字母位置即更換完成。
備註、以上範例的 BigImg.gif、替代圖片.png 均為示意，範例的用意只是呈現如何透過 CSS Sprites 的技巧，從一張大圖片中，取得所需要的部分，並且放到該呈現圖片的位置，實際應用在一個網頁設計規劃中，還是要由美工設計與程式設計兩個部分的搭配，才能完成這樣的呈現方式，雖然在設計過程需要花上更多的時間，但相對的網站流量越龐大，運用 CSS Sprites 所節省的伺服器工作量就越可觀。
发表评论
0 评论