Css背景圖像破解與較大的圖像（CSS精靈）

智能瀏覽器如何實現「CSS背景圖像黑客」，這種技術記憶方式與更大的圖像使用？Css背景圖像破解與較大的圖像（CSS精靈）

的例子可以在此頁（請看例如加號圖標。）：
http://blueimp.github.com/jQuery-File-Upload/

的加號圖標是不是一個真正的16x16px圖像，它是更大（469px X 159px），實際上這一點： http://blueimp.github.com/cdn/img/glyphicons-halflings.png
（或這樣的：http://blueimp.github.com/cdn/img/glyphicons-halflings-white.png）

此圖像用作背景圖像位置調整到只顯示圖標模板的一個特定區域中的圖標模板，其中包含的所有圖標和在CSS（http://blueimp.github.com/cdn/css/bootstrap.min.css）這樣：
.icon-plus{background-position:-408px -96px;}

如果圖標較大，例如，尺寸爲150px x 150px的縮略圖和由500張圖片組成的圖標模板？圖標模板然後是37500px x 37500px。瀏覽器能夠以合理的方式處理這個問題，還是每次都在自己的http進程中加載一個縮略圖？

來源

2012-10-02 Timo Kähkönen

這種技術被稱爲CSS Sprites，它用於減少你的http請求，因此你的頁面加載速度更快。

說明：

都在網站上使用的圖片都放在一個單一的畫布上，而不是每個圖像是使用background-position屬性，這種方式映射，HTTP請求減少了從而使你的網頁加載速度更快。

比方說你有10個<img>標籤調用10個不同的圖像，因此瀏覽器需要申請10倍不同的圖像的10倍，從而增加http請求，如果所有這些圖像被放置在一個單獨的帆布/圖像（主要是透明的PNG的），它只是加載一次， CSS處理剩下的..

這是非常有用的，當你在徘徊按鈕或其他什麼東西用的圖像，因爲它已經被加載，你不會看到輕彈同時徘徊它...

For More Reference

來源

2012-10-02 07:45:12

大圖像怎麼樣？如果canvas是37500px x 37500px，並且有500個圖標的大小爲150px x 150px？ –

你需要在製作精靈之前減少你想要在你的網站上顯示的相應圖片，而且你也可以查看CSS3'background-size：whateverpx whateverpx;' –

如果你的網站流量增加，它會很有用，它會增加頁面加載時間，你只需要聰明的使用什麼時候，使用3-4圖像不會有很大的不同，如果你有很多圖像，它確實有所不同，像谷歌，臉書等流行網站廣泛使用這個，只是爲了您的信息，用作背景的圖片不會被拖曳。 –

我研究過這個更進一步，這種黑客命名爲CSS精靈（以及其他哈克優化：數據的URL的base64圖像，CSS/JavaScript的串聯）的需要，因爲HTTP 1.1使所有來電同步（ source）。

在這個時候（2012年10月），這些類似黑客攻擊可能適用於每頁有數百個HTTP調用的大型站點，但幾年內（我假設）HTTP 2.0 is coming支持更好的技術（例如異步調用）這些黑客是不必要的。

黑客的問題是可維護性下降，當HTTP 2.0終於來了，所有黑客可能需要刪除才能返回適當的可維護性和/或充分受益於HTTP 2.0的優點if there are such）。在等待HTTP 2.0時，請考慮例如。 SPDY（這是HTTP 2的可能基礎。0根據recent news，但請首先仔細檢查其他服務器模塊是否不干擾SPDY，並遵循瀏覽器對spdy的支持情況如何增加（如果增加的話）。或者，如果您的網站只有幾個或幾十個http調用，請仔細考慮這些hack是否有足夠的好處來覆蓋可降低的可維護性。

來源

2012-10-05 23:34:00

Css背景圖像破解與較大的圖像（CSS精靈）

回答

相關問題