今天重點學習了CSS精靈圖。
“CSS精靈”，英語css sprite，是以也叫做“CSS雪碧”技術。是一種CSS圖像合并技術，該方法是将小圖示和背景圖像合并到一張圖檔上，然後利用css的背景定位來顯示需要顯示的圖檔部分。
css精靈有什麼優點，就是減少了http請求。比如4張小圖檔，原本需要4個http請求。但是用了css精靈，小圖檔變為了一張圖，http請求隻有1個了。
用ps選框工具選擇需要顯示的部分，點開資訊面闆，width和height就是盒子的寬高，滑鼠定位到圖示的左上角，資訊面闆顯示的x和y的值就是背景定位值，記得加負号。預設左上角為（0,0）。
利用背景定位background-position:x y;顯示圖示。向右向下為正值。向左向上移為負值。
最後做了個小練習拼自己的名字。代碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>精靈圖練習</title>
6 <style>
7 .box{
8 height:138px;
9 }
10 .box span{
11 float: left;
12 display: block;
13 height:138px;
14 }
15 .d{
16 width:112px;
17 height:127px;
18 background: url(timg.jpg) no-repeat -527px -42px;
19 }
20 .e{
21 width:100px;
22 height:134px;
23 background: url(timg.jpg) no-repeat -707px -34px;
24 }
25 .n{
26 width:113px;
27 height:130px;
28 background: url(timg.jpg) no-repeat -14px -391px;
29 }
30 .g{
31 width:133px;
32 height:146px;
33 background: url(timg.jpg) no-repeat -22px -201px;
34 }
35 .l{
36 width:99px;
37 height:134px;
38 background: url(timg.jpg) no-repeat -767px -211px;
39 }
40 .box1{
41 padding-top: 20px;
42 }
43 .box1 span{
44 display: block;
45 float:left;
46 height:165px;
47 }
48 .D{
49 width:78px;
50 height:167px;
51 background: url(timg1.jpg) no-repeat -587px -10px;
52 }
53 .E{
54 width:76px;
55 height:167px;
56 background: url(timg1.jpg) no-repeat -706px -8px;
57 }
58 .N{
59 width:76px;
60 height:167px;
61 background: url(timg1.jpg) no-repeat -362px -398px;
62 }
63 .G{
64 width:76px;
65 height:167px;
66 background: url(timg1.jpg) no-repeat -311px -202px;
67 }
68 .L{
69 width:85px;
70 height:167px;
71 background: url(timg1.jpg) no-repeat -138px -396px;
72 }
73 </style>
74 </head>
75 <body>
76 <div class="box">
77 <span class="d"></span>
78 <span class="e"></span>
79 <span class="n"></span>
80 <span class="g"></span>
81 <span class="l"></span>
82 <span class="e"></span>
83 </div>
84 <div class="box1">
85 <span class="D"></span>
86 <span class="E"></span>
87 <span class="N"></span>
88 <span class="G"></span>
89 <span class="L"></span>
90 <span class="E"></span>
91 </div>
92 </body>
93 </html> 運作效果：
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)