第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>运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读