CSS重複背景，精靈或1px png

好吧我想知道什麼是有關CSS背景圖像和http請求的性能的最佳做法。CSS重複背景，精靈或1px png

1.使用許多不同的1px的PNG背景導致幾個單獨的HTTP請求圖像

2.使用一個大的子畫面圖像與大梯度塊的塊用作背景圖像。這將增加文件大小，但保存在http請求上。

喜歡聽你的意見......

2011-07-01 wilsonpage

您可能需要測試1px圖像與10px圖像的瀏覽器渲染性能，一些瀏覽器在渲染100個1px背景圖像時肯定比較慢，而10個10px背景圖像（滾動時更慢，等等）但我最近沒有嘗試過，所以這可能是過去的事情 –

這取決於你的背景圖片的樣子 –

我認爲這將是更好地使用數據：URI技術的小圖像（如1像素，背景）。

background: url(data:image/png;base64,....) top left repeat-x;

它適用於所有現代瀏覽器。對於舊的IE瀏覽器（如IE6，IE7），您可以通過條件註釋覆蓋樣式。

background: url("path/to/background.png") top left repeat-x;

當然，這種方式你必須重新編碼背景，如果它已經改變。但它節省了很多請求。

2011-07-01 14:02:04 Vladimir

節約http請求始終是更好的解決方案。但是你應該看看文件的大小，這樣它就不會變大。那麼你應該考慮製作兩張或更多的圖片。

請看下面的工具，它允許從unsprited圖像輕鬆創建的子畫面圖像：

2011-07-01 11:12:56 Fender

另外：我依賴於你的背景重複值，你是否可以精靈你我法師（但是我確信你知道之前;-)） – Fender

對於圖像精靈來說有多大？ – wilsonpage

我的ATM是大約80kb ATM – wilsonpage

如果您正在討論使用這些圖像作爲漸變，我建議使用CSS漸變，那麼您根本不需要任何圖像。

當然，CSS漸變的一個明顯的問題是它不被老版本的IE支持。好消息是，有一個名爲CSS3Pie的IE修復程序，它允許它支持標準的CSS漸變功能（以及其他一些有用的CSS功能）。

不需要更多圖像;僅有一個HTC文件（只能下載通過IE瀏覽器）

2011-07-01 14:12:29 Spudley

回答