CSS 精灵
多张图片整合在一张图片上，适用于小图片集合。
- 优点：减少请求
- 缺点：重复操作，计算每一个图片位置
- 使用时，下图每一列的y坐标不变，x坐标改变
-
一般情况下，坐标都是负数
图片坐标.png
示例图片
timg.jpg
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css sprite 使用案例</title>
<style>
*{
margin: 0;
padding: 0;
}
ul.Sprites {
margin: 0 auto;
width: 928px;
padding: 10px;
}
ul.Sprites li {
float: left;
width: 70px;
height: 80px;
font-size: 14px;
line-height: 24px;
text-align: left;
overflow: hidden;
margin: 0 23px;
}
ul.Sprites li span {
display: inline-block;
width: 70px;
padding-top: 5px;
height: 52px;
overflow: hidden;
background: url("../images/timg.jpg") no-repeat;
cursor: pointer;
}
ul.Sprites li a {
display: block;
width: 70px;
height: 20px;
line-height: 20px;
text-align: center;
}
ul.Sprites li span.cp1{
background-position: -6px -5px;
}
ul.Sprites li span.cp2{
background-position: -163px -5px;
}
ul.Sprites li span.cp3{
background-position: -322px -5px;
}
ul.Sprites li span.cp4{
background-position: -481px -5px;
}
ul.Sprites li span.cp5{
background-position: -6px -125px;
}
ul.Sprites li span.cp6{
background-position: -163px -125px;
}
ul.Sprites li span.cp7{
background-position: -322px -125px;
}
ul.Sprites li span.cp8{
background-position: -481px -125px;
}
</style>
</head>
<body>
<div id="contain">
<ul class="Sprites">
<li><span class="cp1"></span><a href="">图片</a></li>
<li><span class="cp2"></span><a href="">相机</a></li>
<li><span class="cp3"></span><a href="">文件夹</a></li>
<li><span class="cp4"></span><a href="">短信</a></li>
<li><span class="cp5"></span><a href="">地图</a></li>
<li><span class="cp6"></span><a href="">钱包</a></li>
<li><span class="cp7"></span><a href="">邮件</a></li>
<li><span class="cp8"></span><a href="">股票</a></li>
</ul>
</div>
</body>
</html>
使用时注意图片路径
最终效果如下
demo.png
网友评论