圖片精靈
css sprites直譯過來就是CSS精靈。通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”。其實就是通過將多個圖片融合到一張圖里面,然后通過CSS background背景定位技術技巧布局網頁背景。主要用于網頁中的小圖標。如京東右側浮動導航

優勢:
- 減少http iis請求數
- 提升了網站性能
- 減少圖片文件數目
缺點:
1.開發過程比較繁瑣
2.需要測量計算每一個背景單元的精確位置,進行定位
3.后期新加或刪除圖標比較麻煩
怎么使用圖片精靈
準備工作
HTML:
<ul id="Sprites">
<li><span class="tb01"></span>購物車</li>
<li><span class="tb02"></span>用戶</li>
<li><span class="tb03"></span>收藏</li>
<li><span class="tb04"></span>客服</li>
</ul>
<style type="text/css">
#Sprites{margin: 0;padding: 0;}
#Sprites li{list-style: none; height:24px;}
/*
引入背景,并設定span標簽的寬高,讓超出內容部分隱藏overflow:hidden
*/
#Sprites li span
{
background: url(images/toolbars.png) no-repeat;
float:left;
width:18px;
height:18px;
overflow:hidden;
}
/*
設置目標定位圖片絕對坐標:前一個是X坐標,后一個Y坐標
*/
#Sprites li span.tb01{background-position: -1px 0px;}
#Sprites li span.tb02{background-position: -96px -214px;}
#Sprites li span.tb03{background-position: -1px -50px;}
#Sprites li span.tb04{background-position: -1px -151px;}
</style>
操作步聚:
1.引入背景圖像,并設定span標簽的寬高,讓超出內容部分隱藏overflow:hidden
2.再分別對不同span class設置對應圖標絕對X坐標值,Y坐標值。
坐標的選取(使用ps切片工具)

- 找到需要定位的圖標做切片選取
- 雙擊進入切片選項
- 獲取X和Y的尺寸(除原點以后,其它坐標均為負值)
注意:
- 背景background-position有兩個數值,前一個代表靠左距離值X(可為正可為負),第二個數值代表靠上距離值Y(可為正可為負)
- 圖片左上角為坐標原點(X,Y)=(0,0)
轉自https://blog.csdn.net/qq_36194388/article/details/118958305
該文章在 2026/4/3 17:30:39 編輯過