图片整合(精灵图)
精灵图的优点:
- 减少图片的字节
- 减少了网页的http请求,从而大大的提高了页面的性能
- 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
- 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
通用代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片整合</title>
<style>
.box{
width:200px;
margin:0 auto;
overflow:hidden;
background:url(img_navsprites_hover.gif )0 0;
background:no-repeat;
}
.into{
float:left;
width:43px;
margin-left:10px;
height: 44px;
}
.span1{
background:url(img_navsprites_hover.gif )0 0;
}
.span1:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
.span2{background:url('img_navsprites_hover.gif') -47px 0;}
.span2:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
.span3{background:url('img_navsprites_hover.gif') -91px 0}
.span3:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>
<body>
<div class="box">
<span class="into span1"></span>
<span class="into span2"></span>
<span class="into span3"></span>
</div>
</div>
</body>
</html>
运行结果:
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/3ddbad7486ceb4524921afd1db488ebb.gif)
总结:
- 精灵图可以通过浮动加背景图片来实现
- 精灵图也可以通过ul也可以实现主要是后期的定位移动。