-
雪碧圖（Sprites）
- 雪碧圖也叫CSS精靈， 是一種CSS圖像合成技術，就是將許多小圖標合並在一張背景透明的圖片上，使用background-position和background-size來控制圖片顯示的區域。
-
為什么要使用雪碧圖
-
網站開發90%會用到小圖標， 多小圖標調用顯示是前端開發常見的問題，如果每個小圖標都單獨調用一張圖片， 即意味着每個小圖標的顯示都產生一個HTTP請求；每個請求都需要一定的性能開銷，主要在請求、以及響應階段。為了減少http請求數量，加速網頁內容顯示，很多網站的導航欄圖標、登錄框圖片等，使用的並不是<image>標簽，而是CSS Sprite雪碧圖。
-
- 雪碧圖的優缺點
- 優點
- 通過將多張圖片合並成一張，可以有效減少 HTTP 請求，提高頁面加載的性能
- 將多張圖片合並到一張圖片中，可以減小圖片的總大小
- 整理起來更為方便，同一個按鈕不同狀態的圖片也不需要一個個切割出來並個別命名
- 只需要修改一張或少張圖片的顏色或樣式來改變整個網頁的風格
- 只需對一張集合的圖片命名，不需要對每一個小圖片進行命名，從而提高了網頁制作效率
- 缺點
- 合成起來麻煩
- 適應性差
- 可維護性差
- 小圖標在高清屏幕上可能會失真，另外頻繁使用定位會占用比較多的CPU
- 具體使用
HTML部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>雪碧圖的使用方法</title> 20 </head> 21 <body> 22 <!-- 圖片拼合技術 sprite 雪碧圖 --> 23 <div class="sprite"></div> 24 </body> 25 </html>
CSS部分
.sprite { /* 1. 定視口 */ width: 180px; height: 180px; border: 1px solid; /* 2. 插圖 */ background-image: url("../img/sprite.jpg"); } .sprite:hover { /* 3. 移動位置 */ background-position: -822px -269px; }