原理：将一堆小图片整合成一张大图片，通过背景属性，background-image backgroud-repeat background-position ，将背景图片显示出来，并通过背景图定位精确显示图片的位置，减少服务器对图片的请求数量。
图片：
<body>
<div class="icons">
<a href="#"></a>
<a class="tw" href="#"></a>
<a class="wi" href="#"></a>
<a class="vi" href="#"></a>
<a class="yo" href="#"></a>
<a class="in" href="#"></a>
</div>
</body>
<style>
.header .icons a{
float: left;
width: 23px;
height: 22px;
background-image: url(../images/icons.png);
background-repeat: no-repeat;
background-position: 0 -7px;
margin-left: 7px;
}
.header .icons a:hover{
background-position: 0 -46px;
}
.header .icons .tw{
background-position: -26px -7px;
}
.header .icons .tw:hover{
background-position: -26px -46px;
}
.header .icons .wi{
background-position: -52px -7px;
}
.header .icons .wi:hover{
background-position: -52px -46px;
}
.header .icons .vi{
background-position: -78px -7px;
}
.header .icons .vi:hover{
background-position: -78px -46px;
}
.header .icons .yo{
background-position: -104px -7px;
}
.header .icons .yo:hover{
background-position: -104px -46px;
}
.header .icons .in{
background-position: -130px -7px;
}
.header .icons .in:hover{
background-position: -130px -46px;
}
</style>
显示结果：
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
