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


當(dāng)您往U盤中拷200張圖片，會等很久。但是如果弄成一個文件，再拷貝就會快很多。CSS Sprites(圖片整合技術(shù)) 的目的就是通過整合圖片，減少對服務(wù)器的請求數(shù)量，從而加快頁面加載速度。如下圖所示:




美國YAHOO在頁面制作中所用到的圖片整合技術(shù)，這樣做雖然需要花一定的時間來有規(guī)則的合并這些ICON，欄目背景，圖片按鈕，以方便CSS調(diào)用，但是這樣做絕對是合算的，而且是有必要的，YSlow也是極力推薦的。


實現(xiàn)方法：
首先將小圖片整合到一張大的圖片上
然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。background-position:-8px -95px;
淺談CSS Sprites技術(shù)以及圖片優(yōu)化 〔背景圖整合〕
　　關(guān)于CSS Sprites技術(shù)的優(yōu)化我們能做到多少，能減多少的請求數(shù)量。這并且不是單方面能做到的，一切取決于XHTML、CSS、CSS Sprites圖片之間的配合?，F(xiàn)時為止沒有絕對優(yōu)化的做法，這也是我在項目中經(jīng)常衡量CSS Sprites圖片與XHTML關(guān)系，如:《一張背景實現(xiàn)自適應(yīng)九宮格》，以下總結(jié)了圖片切割術(shù)與圖象優(yōu)化的一些方法。
圖片優(yōu)化
　　一、對于非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節(jié)省10%-30%的文件體積。
　　二、Photoshop相比起Fireworks，導(dǎo)出同等質(zhì)量的PNG圖片，體積會稍大。而Fireworks雖然做了相應(yīng)壓縮優(yōu)化，但沒有達(dá)到優(yōu)選秀的壓縮。
　　三、我所知的設(shè)計軟件，對于PNG圖片的處理都沒做到優(yōu)選秀的壓縮，圖片體積還有一定的壓縮空間?？梢試L試使用下面介紹的”圖像優(yōu)化工具” 做無失真的壓縮優(yōu)化。
　　四、圖片體積及尺寸方面，建議體積保持在100K以內(nèi)(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權(quán)威人事中得知，具體無從考證)
CSS Sprites圖片切割術(shù)
　　一、CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數(shù)字組合形式定位，這樣能減少維護(hù)帶來的不必要麻煩。
　　二、不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。
　　三、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數(shù)，因為少色數(shù)的圖片文件體積會相對的小。
　　四、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數(shù)情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
　　五、在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
　　六、在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
　　七、圖片對等合并：應(yīng)用CSS Sprites圖片時，適當(dāng)?shù)匕褜Φ认嗤膱D像合并，以節(jié)省空間及減少體積。
　　八、區(qū)分開不需要合并的圖像：如當(dāng)前用戶確定只顯示一種狀態(tài)或一個級別時，不必要把其他的級別或狀態(tài)的圖片合并。
　　九、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預(yù)，也不需要預(yù)留一定的行寬。
相關(guān)的圖像優(yōu)化工具
　　網(wǎng)上流傳的優(yōu)化工具繁多常見的如：
　　ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。

css中用一張背景圖做頁面的技術(shù)有什么優(yōu)勢？
簡單介紹一下 CSS Sprites 的優(yōu)點：
當(dāng)用戶往U盤中拷200張圖片，會等很久。但是如果弄成一個文件，再拷貝就會快很多。
CSS Sprites 的目的就是通過整合圖片，減少對服務(wù)器的請求數(shù)量，從而加快頁面加載速度。
實現(xiàn)方法：
1. 首先將小圖片整合到一張大的圖片上
2. 然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。background-position:-8px -95px;
引用:
原帖由 14px 于 2009-6-8 18:50 發(fā)表
哈哈是咧，36÷9=4k
把9個圖片合成了1個，還是4k
有點點囧。
截圖給你們看

因為省略了一些文件類型的信息，所以圖片會壓縮的很小……
這個是壓縮包，仍然保持懷疑精神的朋友們，可以自己打開看了……
引用:
原帖由 kubau0 于 2009-6-8 17:35 發(fā)表
請問，假設(shè)一個寬高均為 300px 的 div，要從一張很大的 css-sprites 背景圖上取 30px 30px 的區(qū)域重復(fù)，應(yīng)該怎么寫呢？
需要橫向重復(fù)的圖片就在背景圖上縱向排列 (然后圖片寬度拉寬到等于畫布寬度)
需要縱向重復(fù)的圖片,在背景圖上橫向排列.. (然后圖片高度拉寬到等于畫布高度)
如果流量巨大（互聯(lián)星空日流量3000萬IP左右），在前端偷懶，等于給服務(wù)器端增加壓力
增加幾臺服務(wù)器，更麻煩……

而且我們這里多花一點時間，每個用戶打開頁面速度會快一點點，幾千個用戶累積的時間不是小數(shù)字……
[upload=gif]20102205344-1.gif[/upload]