<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪碧图背景图片使用</title>
<style>
.box1{
height: 134px;
width: 127px;
background: url(img/spri.jpg);
}
.box2{
height: 134px;
width: 127px;
background: url(img/spri.jpg);
/* 雪碧图：
在网页加载中图片属于外部资源，不同Html一起加载，所以浏览器会再次发送请求
才渲染图片。
如果我们使用一张图片就完成背景的话，就会避免在此发送请求时导致的影响（网络带宽慢，图片会闪烁一下才加载得出来）
使用雪碧图需要计算背景的大小，然后需要显示部分在雪碧图的位置，以此来设置背景图片的偏移量
用 background-position 来表示。
*/
background-position: 0 134px;
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/3994350/blog/3215359