什么是CSS Sprite ？ 不知道您在瀏覽yahoo.com的網(wǎng)頁中是否注意到,yahoo在頁面制作上的技術(shù)和大多數(shù)網(wǎng)站不一樣,他們把頁面上的 ICON，欄目背景啊，圖片按鈕啊等都有會有規(guī)則的合并一張背景圖,然后用background-position來實現(xiàn)背景圖片的定位，他們?yōu)槭裁匆?費一些時間來合并這些CSS背景圖片呢,CSS中用一張背景圖做頁面的技術(shù)到底有什么優(yōu)勢呢? 通常我們把它叫做CSS圖像拼合技術(shù),當然還有人把CSS Sprites叫做”CSS貼圖定位”。 使用CSS Sprite 的好處？

---

CSS Sprites(圖片整合技術(shù)) 的目的就是通過整合圖片，減少對服務(wù)器的請求數(shù)量，從而加快頁面加載速度。如下圖所示: 實現(xiàn)方法：

• 首先將小圖片整合到一張大的圖片上
• 然后根據(jù)具體圖標在大圖上的位置，給背景定位。background-position:-8px -95px;

圖片優(yōu)化
　　一、對于非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節(jié)省10%-30%的文件體積。
　　二、Photoshop相比起Fireworks，導出同等質(zhì)量的PNG圖片，體積會稍大。而Fireworks雖然做了相應(yīng)壓縮優(yōu)化，但沒有達到最優(yōu)秀的壓縮。
　　三、我所知的設(shè)計軟件，對于PNG圖片的處理都沒做到最優(yōu)秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的”圖像優(yōu)化工具” 做無失真的壓縮優(yōu)化。
　　四、圖片體積及尺寸方面，建議體積保持在100K以內(nèi)(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸）。
CSS Sprites圖片切割術(shù)
　　三、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數(shù)，因為少色數(shù)的圖片文件體積會相對的小。
　　四、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數(shù)情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
　　五、在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
　　六、在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
　　九、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。 如下是apple公司的應(yīng)用

如何來制作?

---

基本的原理，就是利用background-postion的負值來進行調(diào)節(jié)。 當我們定位于background-position:-50px -50px;時發(fā)現(xiàn)圖片向左上，移動了，也就以DIV的左上角為中心，圖向左移動了50PX，向右也移動了50PX． 參考點： 以圖片為(0,0)為原點。 如下圖片>>>>進行定位

---

使用fireworks工具來定位圖片。 代碼示例 background-position: -396px -116px;

來源：http://www.cnblogs.com/myjavawork/articles/1981345.html

轉(zhuǎn)載于:https://www.cnblogs.com/xiaomifeng/p/5627359.html

總結(jié)

以上是生活随笔為你收集整理的CSS Sprite的应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。