1. 什么是CSS Sprite
将一些碎小的图片拼接为一张大点的图片来使用,目的是为了减少浏览器的http请求次数以提高网页的加载速度。
每次请求图片都需要跟服务器建立一次连接,并且浏览器的最大并发请求数是有限制的。使用雪碧图并不能减少传送的数据的总量,但可以通过节省掉一部分建立、关闭连接的时间来加快网页的加载速度。
2. 如何使用
2.1 怎么得到雪碧图?
※ 直接手动拼接,只要可以将需要用到的小图片拼在一张图片上即可,当然,拼接应该尽量遵循的原则:
尽量让这张图片以后可维护;
在保证可维护性的前提下,尽量少的在图片上留大面积空白;
※ 使用生成工具,比如cssgaga等,参见http://www.99css.com/cssgaga/
2.2 怎么使用雪碧图?
拿到雪碧图之后,如果是使用手动拼接方式的话,就使用ps等工具量一下具体的坐标,如果是使用生成工具自动生成的话,生成结果中应该会带上之前每张小图片的坐标的。
使用雪碧图的套路就是先使用background-image:url(“foo.png”)来设置元素的背景图片,然后使用background-position:x-shift y-shift;来滑动图片。
一个简单的使用雪碧图的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Sprite Demo</title>
<style type="text/css">
/*侧栏容器div*/
.nav-bar{
width:250px;
}
/*侧栏列表样式*/
.nav-list li{
list-style:none;
padding:10px;
border:1px solid #DDD;
}
/*sprite图标的样式*/
.nav-list li i{
background-image:url("imgs/sidebar.png");
display:inline-block;
width:30px;
height:24px;
float:left;
}
/*鞋包配饰*/
.nav-list li:nth-child(2) i{
background-position:0px -24px;
}
/*运动户外*/
.nav-list li:nth-child(3) i{
background-position:0px -48px;
}
/*珠宝手表*/
.nav-list li:nth-child(4) i{
background-position:0px -72px;
}
/*手机数码*/
.nav-list li:nth-child(5) i{
background-position:0px -96px;
}
/*家电办公*/
.nav-list li:nth-child(6) i{
background-position:0px -120px;
}
/*护肤彩妆*/
.nav-list li:nth-child(7) i{
background-position:0px -144px;
}
/*母婴用品*/
.nav-list li:nth-child(8) i{
background-position:0px -168px;
}
</style>
</head>
<body>
<div class="nav-bar">
<ul class="nav-list">
<li><i></i>服装内衣</li>
<li><i></i>鞋包配饰</li>
<li><i></i>运动户外</li>
<li><i></i>珠宝手表</li>
<li><i></i>手机数码</li>
<li><i></i>家电办公</li>
<li><i></i>护肤彩妆</li>
<li><i></i>母婴用品</li>
</ul>
</div>
</body>
</html>
效果图:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SY2kzYyQzM2IDOjdDMxI2M5MGOiJzMhRDZjFTM3U2Yk9CX3IzLcdDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL5M3Lc9CX6MHc0RHaiojIsJye.png)
雪碧图:
3.总结
3.1 雪碧图的原理?
以左上角的顶点作为定位的原点。
x偏移为负值的话就向右移动。
y偏移为负值的话就向下移动。
原图并不会被裁切,它还是那么大,就在那儿,只是超出的部分隐藏掉了,相当于是滑动图片。
3.2 涉及到的属性
background-image:url("imgs/sidebar.png");
background-position : x-shift y-shift;
background-position-x : x-shift;
background-position-y : y-shift;
3.3 什么时候适合使用雪碧图?
图是静态的,不随着用户信息的变化而变化。
小图片,容量比较小,主要是为了减少http请求次数。
相关生成雪碧图工具:
CssGaga
http://www.99css.com/cssgaga/
在线生成雪碧图:
http://alloyteam.github.io/gopng/
http://csssprites.com/
本作品采用知识共享署名 4.0 国际许可协议进行许可。