将所需要的小图标放在一图片中，用像素定位图片

经常我们在网站中看到如下的css代码：

.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;

background-repeat: no-repeat;
background-image: url(../img/icons.png);
background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

所呈现的效果很不错，但却不懂css代码都是如何写的。

今天终于弄明白px定位了，做一下总结，如果有什么不是很清楚的地方，还希望大家多多指教。

background-position的图片是以坐标或百分比方式定位的，纵坐标下方为正方向，所以右下方的横坐标、纵坐标均为正。同样background-position的像素是对象图片进行移动,负值则相对于定点原点向左、向上移动。

从一张大的图片上得到小的图片，除了上边所说的用background-position定位外，首先应该将背景图片background-image 和定位原点background-position: 0px 0px都定义好, 当然小图标的大小也应该定义好，如：width: 24px; height: 24px;，这样图片移动好以后，用background-position定位相对于原点，再加上小图片的大小，就可以取得了。

不知道我写的大家是否明白，如有什么异议，请与我联系。