今天重点学习了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>
运行效果：
