sprite學習

時間 2019-11-09

標籤 sprite 學習简体版

原文原文鏈接

CSS雪碧圖，就是把全部的圖表，按鈕和圖形包含在一個圖像裏面。它要求：html

靜態圖片，不隨用戶信息變化而變化；小圖片，圖片容量比較小；加載量比較大。瀏覽器

使用這種技術能夠減小Web瀏覽器發出的服務器請求，顯著加快下載速度。同時把小圖片，按鈕集中在一塊兒，能夠提升維護性。服務器

在這裏介紹一款CSS Sprite自動生成工具——CssGaga，能夠快速生成雪碧圖。在實際製做中，遇到不少的坑，如今總結下：ide

1. 坑一工具

html：url

1 <div class="cat">
2         <ul>
3             <li class="cat-1"><i></i><h3>服裝內衣</h3></li>
4             <li class="cat-1"><i></i><h3>服裝內衣</h3></li>
5         </ul>
6     </div>

CSS樣式：spa

1 * {margin:0;padding:0;}
2     .cat {width: 150px;background: #f8f8f8; border:1px solid #ccc;padding:0 20px;}
3         ul {list-style: none;}
4         li {height: 31px;line-height: 31px;overflow: hidden;border-bottom:1px solid #ccc;margin-bottom: -1px;}
5  li i {display: inline-block;width: 30px;height: 24px;}
6  li h3{ font-size: 14px;font-weight: 400; }

實際顯示：code

緣由：是i標籤設置display：inline-block，h3是塊元素，單獨佔據一行，父元素li設置了overflow屬性，因此h3下移一行，內容沒法顯示。htm

解決辦法：blog

1. i標籤去掉display屬性，改成浮動float：left；

2. h3標籤改成a標籤，這種方式比較經常使用。

2. 坑二

設置 i 標籤和h3內容之間的距離，由於 i 標籤是浮動的，h3文字內容會靠着i標籤，須要設置必定的間距。在這裏，能夠設置 i 標籤的外邊距margin，這樣二者之間的距離會拉開。i已經脫離文檔流，這裏的話，就至關於文字的環繞。

1 li i {float:left;width: 30px;height: 24px;background: url(sidebar.png);margin: 3px 10px 0 0 ;}

修改前：修改後：

3.坑3

實際background-position的移動距離和圖標的高度（會影響x軸的移動距離）和寬度（會影響Y軸的移動距離）有關係

4.最終的代碼以下：

 1 <style>
 2     * {margin:0;padding:0;}
 3     .cat {width: 150px;background: #f8f8f8; border:1px solid #ccc;padding:0 20px;}
 4         ul {list-style: none;}
 5         li {height: 31px;line-height: 31px;border-bottom:1px solid #ccc;overflow: hidden;margin-bottom: -1px;}
 6         li i {float:left;width: 30px;height: 24px;background: url(sidebar.png);margin-top: 4px;margin-right: 3px;}
 7         li h3{ font-size: 14px;font-weight: 400; }
 8         .cat-1 i {background-position: 0 0;}
 9         .cat-2 i {background-position: 0 -24px;}
10         .cat-3 i {background-position: 0 -48px;}
11         .cat-4 i {background-position: 0 -72px;}
12         .cat-5 i {background-position: 0 -96px;}
13         .cat-6 i {background-position: 0 -120px;}
14         .cat-7 i {background-position: 0 -144px;}
15         .cat-8 i {background-position: 0 -168px;}
16         .cat-9 i {background-position: -40px 0;}
17     </style>
18 </head>
19 <body>
20     <div class="cat">
21         <ul>
22             <li class="cat-1"><i></i><h3>服裝內衣</h3></li>
23             <li class="cat-2"><i></i><h3>鞋包配飾</h3></li>
24             <li class="cat-3"><i></i><h3>運動戶外</h3></li>
25             <li class="cat-4"><i></i><h3>珠寶手錶</h3></li>
26             <li class="cat-5"><i></i><h3>手機數碼</h3></li>
27             <li class="cat-6"><i></i><h3>辦公家電腦</h3></li>
28             <li class="cat-7"><i></i><h3>護符彩妝</h3></li>
29             <li class="cat-8"><i></i><h3>母嬰用品</h3></li>
30             <li class="cat-9"><i></i><h3>其餘分類</h3></li>
31         </ul>
32     </div>
33 </body>

效果圖以下：

後續在涉及到小圖標比較多的狀況下，能夠製做雪碧圖，使用 i標籤，而後經過控制對應背景圖片的X軸和Y軸距離來實現顯示不一樣圖表的效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。