第9天：CSS精灵图

今天重点学习了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>

运行效果：

第9天：CSS精灵图

你可能感兴趣的:(第9天：CSS精灵图)