精灵图

发表于

精灵图的由来

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图.

工作原理

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    .nav {
        background: #000;
        height: 48px;
        margin-top: 100px;
    }
    
    .nav-con {
        margin: 0 auto;
        width: 1182px;
        height: 48px;
        position: relative;
    }
    
    .nav-con ul li {
        float: left;
    }
    
    .nav-con ul li a {
        text-decoration: none;
        color: #fff;
        display: inline-block;
        height: 48px;
        font: 16px/48px microsoft yahei;
        padding: 0 13px;
    }
    
    .nav-con ul li a:hover {
        background: #3A92D0;
    }
    
    .hot {
        width: 31px;
        height: 21px;
        background: url("sprite.png") -57px 0;
        position: absolute;
        left: 246px;
        bottom: 34px;
    }
    
    .new {
        width: 31px;
        height: 21px;
        background: url("sprite.png") -135px 0;
        position: absolute;
        left: 636px;
        bottom: 34px;
    }
    </style>
</head>

<body>
    <div class="nav">
        <div class="nav-con">
            <div class="hot"></div>
            <div class="new"></div>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">UI设计</a></li>
                <li><a href="#">前端与移动开发</a></li>
                <li><a href="#">问答专区</a></li>
                <li><a href="#">iOS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">C/C++</a></li>
                <li><a href="#">python</a></li>
                <li><a href="#">网络营销</a></li>
                <li><a href="#">活动专区</a></li>
            </ul>
        </div>
    </div>
</body>

</html>
坚持原创技术分享，您的支持将鼓励我继续创作！