CSS Sprites詳解

2024-07-11 08:47:43

字體：大中小

來源：轉載

供稿：網友

CSS Sprites技術不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發表對該技術的詳細闡述。原先只在CSS玩家之間作為一種制作方法流傳，后來出來個 14 Rules for Faster-Loading Web Sites , 技術人員之間競相傳閱，其中第一條規則Make Fewer HTTP Requests就提到CSS Sprites。于是這個小妖精就火了起來，甚至出現了在線生成工具，勢不可擋也。近來國內很多blog都提到CSS Sprites，最著名的例子莫過于 http://www.google.co.kr/ 下方的那幾個動畫。最新發布的YUI中，也是使用到CSS Sprites，幾乎都有的CSS裝飾圖都被一個 40×2000的圖包辦。社交大站Facebook最近也使用了一個 22×1150的圖片承擔了所有icon.一時間，CSS Sprites無處不在。
原理
我們知道，自CSS革命以降，HTML傾向于語義化，在一般情況下不再在標記里寫裝飾性的內容而是把呈現的任務交給了CSS。GUI是繽紛多彩的，少不了各種漂亮的圖來裝點。新時代的生產方式是，在HTML布滿各種各樣的鉤子（hook），然后交由CSS來處理。在需要用到圖片的時候，現階段是通過CSS屬性background-image組合background-repeat, background-position等來實現（題外話：為何我提現階段，因為未來瀏覽器若支持content則又新增另外的實現方法）。我們的主角是，你一定猜到了，就是background-position。通過調整background-position的數值，背景圖片就能以不同的面貌出現在你眼前。其實圖片整體面貌沒有變，由于圖片位置的改變，你看到只該看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因為它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應該看到的部分。

我們使用YUI的sprite.png舉個例子，假如我們有這么一段代碼，max代表最大化，min代表最小化，我們需要給它們配上相應的漂亮圖片（這樣我們的網站才能夠吸引人，才可以賣錢，才可以到佛羅里達曬太陽:D）：

<div class="max">最大化</div>
<div class="min">最小化</div>

這兩個class都使用同一個圖片：

復制代碼

上一篇：在DIV容器中使用浮動元素的方法

下一篇：深入解析IE兼容模式問題