Css - 精灵图 | 精灵图

Css - 精灵图css sprite

一个页面文档上总是会有N多的图标小图片，它们都是以背景图的方式嵌入文档，每个小图片需要一个url的css属性，每个url都指向一个服务器地址的链接，每个链接都代表要向服务器发起一次请求，这就给文档加载带来了一定的延迟，所谓精灵图是指将需要的多张小图片做成一张大图，只需要利用css的background-position对图片进行合理的背景设置即可减轻服务端压力，同时还缩短了文档载入的时间。

Css - 精灵图-LMLPHP

* {
    margin: 10px auto;            
}

div {
    background: url(Img/index.png) no-repeat;
}
        
#icon1 {
    width: 27px;
    height: 24px;
    background-position:0 -185px;
}

#icon2 {
    width: 58px;
    height: 59px;
    background-position: -183px 0;
}

#icon3 {
    width: 26px;
    height: 27px;
    background-position: -157px -105px;
}
<body>
    <div id="icon1"></div>
    <div id="icon2"></div>
    <div id="icon3"></div>
</body>

确定需要的图片的偏移量是通过在ps中使用切片工具将小图切好，再右击切片图-编辑切片找到小图的x和y轴的偏移量

Css - 精灵图-LMLPHP

Css - 学习总目录