當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Css Sprites 多张图片整合在一张图片上

發布時間：2023/12/1 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 Css Sprites 多张图片整合在一张图片上小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS Sprites原理： 　　CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。 CSS Sprites優缺點：

　　優點

1.利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；　　　　2.CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。　　　　3.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。　　　　4.更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

　　缺點

誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：　　　　　　1.在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；　　　　　　2.CSS Sprites在開發的時候比較麻煩，你要通過pohtoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！　　　　　　3.CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。　　　　　　4.CSS Sprites非常值得學習和應用，特別是頁面有一堆icon（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
<!DOCTYPE html> <html> <head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/><style>.sprites div {margin: 5px;}.sprites span {float: left;width: 20px;height: 20px;background-image: url(sprite.png);background-size: 60px 40px;}.sprites1{background-position: 0 0;}.sprites2{background-position: -20px 0;}.sprites3{background-position: 0 -20px;}.sprites4{background-position: -20px -20px;}.sprites5{background-position: -40px 0;}.sprites6{background-position: -40px -20px;}</style> </head> <body> <div class="sprites"><div><span class="sprites1"></span>付款圖標</div><div><span class="sprites2"></span>刪除圖標</div><div><span class="sprites3"></span>存款圖標</div><div><span class="sprites4"></span>粘貼圖標</div><div><span class="sprites5"></span>笑臉圖標</div><div><span class="sprites6"></span>編輯圖標</div> </div> </body> </html>

轉載于:https://www.cnblogs.com/liuting1314521/p/6047464.html

總結

以上是生活随笔為你收集整理的Css Sprites 多张图片整合在一张图片上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。