CSS中關於雪碧圖的詳細介紹介紹
- 黄舟原創
- 2017-10-26 10:06:522373瀏覽
CSS雪碧圖 即CSS Sprite，也有人叫它CSS精靈，是一種CSS影像合併技術，該方法是將小圖示和背景影像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。 CSS Sprites技術被國內一些人稱為CSS雪碧圖，其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background- position」的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置
#CSS雪碧圖#的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。這張圖片使用CSS background和background-position屬性渲染，這也意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非標籤。
CSS知識點：
background-image
#backgorund-position
CSS雪碧圖特點：
#相對於當個小圖標，它節省檔案體積和服務請求次數。將所有零碎的網頁背景圖片整合到一起，這樣做可以有效的減少http對圖片的請求次數，而不需要加載多次加載零碎的背景圖片，所以合理的利用好它可以有效的提高網頁的加載速度。
一般情況下，你需要儲存為PNG-24的檔案格式。
可以設計出豐富多彩的色體表。
CSS雪碧圖困難：
你需預先決定每個小圖示的大小
注意小圖示與小圖示之間的距離
細心、耐心
PNG-24的圖片格式：PNG-24可減少毛邊。
CSS雪碧圖優點
#減少載入網頁圖片時對伺服器的請求次數
可以合併多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量。
提高頁面的載入速度
sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少滑鼠滑過的一些bug
IE6不會主動預先載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
CSS雪碧圖不足
CSS雪碧的最大問題是記憶體使用
除非這個雪碧圖片是被非常小心的組織，你會最終使用大量的無用的空白。一個例子是來自於WHIT TV的網站。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好－實際下載大小只有大概26K — 但是瀏覽器並不會渲染壓縮後的圖片資料。當這張圖片被下載並被解壓縮之後，它將佔用差不多75MB的記憶體 (1299 * 15000 * 4)。如果這張圖片並沒有使用alpha透明，它將會被優化至1299 * 15000 * 3，但是要在損失渲染速度的情況下。即使那樣，我們也會討論55MB。這張圖片的大部分其實就是空白，那裡什麼都沒有，沒沒有任何有用的內容。只是載入 WHIT主頁 就會導致你的瀏覽器的記憶體佔用上升到至少75+MB，只是因為那一張圖片。 （PS:遺憾的是，網站最近已經改版，文中提到的圖片已經不存在了）
影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說，是為了避免雪碧中相鄰的圖片被“露進來」。這對於小圖片沒有什麼問題，但是對於大圖片會是一個效能下降。
拼圖維護比較麻煩
拼合這麼多圖片，需要耐心。同時也要時時思考如何在使用這個圖片是不會產生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放在一起時，不容易操作。如果要修改雪碧中的一張圖片，你就要修改整張圖片，這無疑會增加工作量。
使CSS的編寫變得困難
如果CSS雪碧夠複雜，則大大增加了CSS的程式碼量和難度，讓維護和修改變得困難起來。
CSS 雪碧呼叫的圖片不能被列印
CSS 雪碧呼叫的圖片不能被列印，除非在@media中特別加入 print宣告。
錯誤得使用Sprites 影響可訪問性
一些剛入門的開發人員會為了節省HTTP 請求數(這是使用CSS Sprite 一直強調的好處)而把所有的圖片都當作背景圖片來處理– 甚至是那些傳達重要訊息的圖片。結果會導致一個缺乏可訪問性的網站，也會降低 HTML 中 title 和 alt 的潛在益處。
因此，CSS sprite 本身沒錯，而且也不會引發可訪問性問題(事實上，正確得使用會提高可訪問性)。但是不分對錯得過度使用 sprite 會阻礙具有可訪問性和生產力方面的網頁建立進程。
CSS雪碧圖 即CSS Sprite，也有人叫它CSS精靈，是一種CSS影像合併技術，該方法是將小圖示和背景影像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。 CSS Sprites技術被國內一些人稱為CSS雪碧圖，其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background- position」的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置
# CSS雪碧圖的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。這張圖片使用CSS background和background-position屬性渲染，這也意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非標籤。
CSS知識點：
background-image
#backgorund-position
CSS雪碧圖特點：
相對於當個小圖標，它節省檔案體積和服務請求次數。將所有零碎的網頁背景圖片整合到一起，這樣做可以有效的減少http對圖片的請求次數，而不需要加載多次加載零碎的背景圖片，所以合理的利用好它可以有效的提高網頁的加載速度。
一般情況下，你需要儲存為PNG-24的檔案格式。
可以設計出豐富多彩的色體表。
CSS雪碧圖困難：
你需預先決定每個小圖示的大小
注意小圖示與小圖示之間的距離
細心、耐心
PNG-24的圖片格式：PNG-24可減少毛邊。
CSS雪碧圖優點
#減少載入網頁圖片時對伺服器的請求次數
可以合併多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量。
提高頁面的載入速度
sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少滑鼠滑過的一些bug
IE6不會主動預先載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
CSS雪碧圖不足
CSS雪碧的最大問題是記憶體使用
除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。一個例子是來自於WHIT TV的網站。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好－實際下載大小只有大概26K — 但是瀏覽器並不會渲染壓縮後的圖片資料。當這張圖片被下載並被解壓縮之後，它將佔用差不多75MB的記憶體 (1299 * 15000 * 4)。如果這張圖片並沒有使用alpha透明，它將會被優化至1299 * 15000 * 3，但是要在損失渲染速度的情況下。即使那樣，我們也會討論55MB。這張圖片的大部分其實就是空白，那裡什麼都沒有，沒沒有任何有用的內容。只是載入 WHIT主頁 就會導致你的瀏覽器的記憶體佔用上升到至少75+MB，只是因為那一張圖片。 （PS:遺憾的是，網站最近已經改版，文中提到的圖片已經不存在了）
影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說，是為了避免雪碧中相鄰的圖片被“露進來」。這對於小圖片沒有什麼問題，但是對於大圖片會是一個效能下降。
拼圖維護比較麻煩
拼合這麼多圖片，需要耐心。同時也要時時思考如何在使用這個圖片是不會產生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放在一起時，不容易操作。如果要修改雪碧中的一張圖片，你就要修改整張圖片，這無疑會增加工作量。
使CSS的編寫變得困難
如果CSS雪碧夠複雜，則大大增加了CSS的程式碼量和難度，讓維護和修改變得困難起來。
CSS 雪碧呼叫的圖片不能被列印
CSS 雪碧呼叫的圖片不能被列印，除非在@media中特別加入 print宣告。
錯誤得使用Sprites 影響可訪問性
一些剛入門的開發人員會為了節省HTTP 請求數(這是使用CSS Sprite 一直強調的好處)而把所有的圖片都當作背景圖片來處理– 甚至是那些傳達重要訊息的圖片。結果會導致一個缺乏可訪問性的網站，也會降低 HTML 中 title 和 alt 的潛在益處。
以上是CSS中關於雪碧圖的詳細介紹介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！