1、css 图像拼合
- 图像拼合就是单个图像的集合。
- 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
- 使用图像拼合会降低服务器的请求数量，并节省带宽。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
body{
margin:0;
}
.box{
width:500px;
margin:0 auto;
overflow:hidden;
}
.btm{
background:url(images/img_navsprites_hover.gif) no-repeat;
width:43px;
height:44px;
display:block;
float:left;
margin-left:10px;
}
.pp1{
background-position:-47px 0;
}
.pp2{
background-position:-91px 0;
}
.pp3{
background-position:0 0;
}
.pp1:hover{
background-position:-47px -45px;
}
.pp2:hover{
background-position:-91px -45px;
}
.pp3:hover{
background-position:0 -45px;
}
.btn{
width:200px;
margin:200px auto;
}
.btn i{
background:url(images/pwd-icons-new.png) no-repeat -48px -96px;
display:block;
width:38px;
height:38px;
background-color:blue;
}
.first{
width:200px;
margin:20px auto;
}
.first i{
width:24px;
height:30px;
display:block;
background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -440px;
}
.one{
width:200px;
margin:20px auto;
}
.one i{
width:16px;
height:17px;
display:block;
background:url(images/toolbars.png) no-repeat -96px -212px;
}
</style>
</head>
<body>
<div class="box">
<span class="btm pp1"></span>
<span class="btm pp2"></span>
<span class="btm pp3"></span>
</div>
<div class="btn">
<i></i>
</div>
<div class="first">
<i></i>
</div>
<div class="one">
<i></i>
</div>
</body>
</html>- float改变背景
效果图：
