今天学习下前端中的 精灵图.
为何引入精灵图: 网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。
以本地图片为例:
精灵图使用其实就是对background-position:x y对图片进行偏移显示而已.
下面是代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <html>
<head>
<style>
*{
margin:0;
padding:0;
}
.div0{
margin:10px;
}
.demo1,.demo2,.demo3,.demo4,.demo5,.demo6{
display:inline-block;
width:17px;
height:17px;
background-color:transparent;
background-image:url(img/精灵图.png);
background-repeat:no-repeat;
}
.demo1{ background-position:-38px -37px;}
.demo2{ background-position:-62px -37px;}
.demo3{ background-position:-86px -37px;}
.demo4{ background-position:-110px -37px;}
.demo5{ background-position:-134px -37px;}
.demo6{ background-position:-159px -37px;}
ul{
list-style:none;
}
ul li {
margin:10px;
}
</style>
</head>
<body>
<div class="div0">
<ul>
<li><div class="demo1"></div> 图标1</li>
<li><div class="demo2"></div> 图标2</li>
<li><div class="demo3"></div> 图标3</li>
<li><div class="demo4"></div> 图标4</li>
<li><div class="demo5"></div> 图标5</li>
<li><div class="demo6"></div> 图标6</li>
</ul>
</div>
</body>
</html>
|
效果图:
源码