雪碧圖的應用

雪碧圖的應用實例

小周末，研究了一下雪碧圖的實現方式。先科普一下雪碧圖，雪碧圖就是css sprite的意思，也有叫css精靈。就是呢，將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。

1、好處優點：

有效減少網站的http請求數量，加速圖片的顯示。

2、條件：

靜態圖片，圖片不睡用戶信息的變化而變化。
小圖片，容量比較小的（2~3k）。
圖片加載量比較大的。

注意：大圖片不建議用雪碧圖咯，圖片那么大，拼完之后豈不是拆機無敵大咯，加載就慢了，得不償失！！！

3、原理：利用 css3的 background-position控制一個層可顯示區域范圍大小，通過一個窗口，對背景圖進行滑動。

簡單來說，就是利用這個屬性，設置背景圖需要顯示的起始位置，在通過標簽來控制背景圖顯示的范圍。

4、先來了解一下background-position屬性吧，

根據圖所知：

以左上角為（0,0）坐標
x,y都是負值

綜上所訴，所以background-position的取值就是背景圖顯示的起始坐標，形式就是background-position：0, 0;

5、拼圖：拼圖可以用ps，或者網上很多在線雪碧圖生成工具，可以利用這些去生成雪碧圖。

我是用一個在線拼圖工具手動拖拉評出來的，有點惡心~~哈哈

其實最好的拼圖就是每個圖標邊距是多少和圖標周圍的留白留多少都控制好，對css的background-position的坐標寫起來有規律的話，好些很多（然而這個是我自己手動拖拉的，位置很沒有規律，所以下面的坐標值都是調試過才取值的）

講完這些了，可以來正題了，html和css代碼了，下面代碼是模仿生成一個菜單~~~

6、代碼：

 1    <div id="content">
 2         <ul class="content">
 3             <li class="cat-1">
 4               <i></i>
 5               <h3>女裝/男裝/內衣</h3>
 6             </li>
 7             <li class="cat-2">
 8               <i></i>
 9               <h3>鞋靴/箱包/配件</h3>
10             </li>
11             <li class="cat-3">
12               <i></i>
13               <h3>童裝玩具/孕產/用品</h3>
14             </li>
15             <li class="cat-4">
16               <i></i>
17               <h3>家電/數碼/手機</h3>
18             </li>
19             <li class="cat-5">
20               <i></i>
21               <h3>美妝/洗護/保健品</h3>
22             </li>
23             <li class="cat-6">
24               <i></i>
25               <h3>珠寶/眼鏡/手表</h3>
26             </li>
27             <li class="cat-7">
28               <i></i>
29               <h3>運動/戶外/樂器</h3>
30             </li>
31             <li class="cat-8">
32               <i></i>
33               <h3>游戲/動漫/影視</h3>
34             </li>
35             <li class="cat-9">
36               <i></i>
37               <h3>美食/生鮮/零食</h3>
38             </li>
39             <li class="cat-10">
40               <i></i>
41               <h3>鮮花/寵物/農資</h3>
42             </li>
43             <li class="cat-11">
44           <i></i>
45               <h3>房產/裝修/建材</h3>
46             </li>
47         </ul>
48    </div>

 1   <style type="text/css" >
 2    #content{
 3        width: 180px;
 4        background: #f8f8f8;
 5        border: 1px solid #bbb;
 6    }
 7    h3{
 8        margin: 0;
 9        padding: 0;
10    }
11     ul{
12         list-style: none;
13         padding: 0;
14     }
15     li h3{
16         font-size: 14px;
17         font-weight: 400;
18     }
19     li{  
20         margin:  3px 10px 0 0;
21         display: block;
22         height: 31px;
23         line-height: 31px;
24         overflow: hidden;
25         border-bottom: 1px solid #dedede;
26 
27     }
28     li i{
29 background:  url(sprite.png);
30 display: inline;
31 width: 40px;
32 height: 28px;
33 float: left;
34     }
35     .cat-1 i{
36         background-position: -7px -5px;
37     }
38    .cat-2 i{
39         background-position: -2px -35px;
40     }
41     .cat-3 i{
42         background-position: -7px -65px;
43     }
44     .cat-4 i{
45         background-position: -7px -105px;
46     }
47     .cat-5 i{
48         background-position: -7px -129px;
49     }
50     .cat-6 i{
51         background-position: -7px -151px;
52     }
53     .cat-7 i{
54         background-position:-60px -4px;
55     }
56     .cat-8 i{
57         background-position:-56px -33px;
58     }
59     .cat-9 i{
60         background-position: -56px -66px;
61     }
62     .cat-10 i{
63         background-position:-60px -103px;
64     }
65     .cat-11 i{
66         background-position: -51px -128px;
67     }
68 
69    </style>

7、效果圖如下：

雪碧圖的應用就這樣了~~有錯歡迎指出~~哈哈哈

posted @ 2016-07-10 20:39 holiday1123 閱讀(796) 評論(0) 收藏舉報

刷新頁面返回頂部

雪碧圖的應用

公告