一、雪碧图的原理
CSS Sprites 因其英文被称为雪碧图。
主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。
雪碧图示例.png
主要优势
1、减少网页的HTTP请求，提高页面性能
2、减少图片命名的困扰
主要优势
1、需要计算每个图片的位置
2、后期维护困难
二、雪碧图的实现
通过设置每个<i></i>对应的background-position来展现不同位置的图标。
其中第一个参数代表x轴控制左右，第二个参数代表y轴控制上下。
默认情况下为
background-position: 0% 0%;
image.png
当设置x为负数，相当于固定展现框不动，图片向左侧移动，展现的是相对右侧的内容。同理当y为负数，图片向上侧移动，展现的是相对下方的内容。
image.png
<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style>
.item-list {
border: 1px solid #333;
padding: 0;
width: 200px;
background-color: #f8f8f8;
}
.item-list li {
list-style: none;
width: 160px;
height: 40px;
margin: 0 20px;
border-bottom: 1px solid #dedede;
line-height: 40px;
}
li i {
background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
width: 30px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
.p1 i {
background-position: -40px 0px;
}
.p2 i {
background-position: 0px -24px;
}
.p3 i {
background-position: 0px -48px;
}
.p4 i {
background-position: 0px -72px;
}
.p5 i {
background-position: -40px -72px;
}
.p6 i {
background-position: -40px -48px;
}
.p7 i {
background-position: 0px 0px;
}
</style>
</head>
<body>
<div style="height:400px;">
<div style="width:600px;height:100%;margin-left:300px;">
<ul class="item-list">
<li class="p1"><i></i>商品A</li>
<li class="p2"><i></i>商品B</li>
<li class="p3"><i></i>商品C</li>
<li class="p4"><i></i>商品D</li>
<li class="p5"><i></i>商品E</li>
<li class="p6"><i></i>商品F</li>
<li class="p7"><i></i>商品G</li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
</body>
</html>
HTML结果.png
网友评论