css中雪碧圖(sprite)的使用及製作方法
阿新 • • 發佈:2020-09-14
雪碧圖(sprite)是減少請求次數的有效手段,其原理是把多張圖片進行合成,使用時通過css進行定位。
1.先看一下雪碧圖
沒有使用雪碧圖時圖示是這樣一個個的單獨檔案:
合成雪碧圖後是這樣拼在一起的一張圖:
2.雪碧圖的使用
首先確定要使用的圖示的位置和大小(可以通過ps測量),
如下的雪碧圖大小統一,排列規則
它們的大小均為30px*30px,第一個圖示位置為0 0,第二個的位置為30px 0,依次...
樣式可以這樣寫:
1 .box1 li:nth-child(1) {
2 width: 30px;
3 height: 30px;
4 background: url(./images/map-icon.png) no-repeat 0 0; /* 第一個圖示*/
5 }
6
7 .box1 li:nth-child(2) {
8 width: 30px;
9 height: 30px;
10 background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二個圖示*/
11 }
12
13 .box1 li:nth-child(3) {
14 width: 30px;
15 height: 30px;
16 background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三個圖示*/
17 }
排列不規則的雪碧圖測量計算就不太方便了,推薦一個線上雪碧圖樣式工具http://tools.jb51.net/code/css_sprite
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
3.合成雪碧圖
如果沒有美工MM給我們做圖,自己找來的很多零碎圖示(.png)可以使用CssSprite工具進行合成。
使用較為簡單,選擇圖片後,可以豎排或橫排,也能手動調整位置;設定css中路徑名及儲存名稱,生成雪碧圖即可,可以同時生成對應的css程式碼。