背景图片的定位像素

原文链接：http://zhuweiwu.com/?p=18

CSS中背景图片的定位有三种方法：（1）关键字：background:url(img.jpg) top left; (2)像素：background:url(img.jpg) 0px -22px; (3)百分比：background:url(img.jpg) 50% 50%。最近刚做了像素方面的定位，所以在此分享像素的定位。
　　CSS中背景定位中的像素其实是图片左上角在显示的区域内的坐标（以显示区域左上角为原点，上边向右为x轴，左边向下为y轴如下图）

下面以本人做的Rss订阅来说明。图中人人网订阅图标的左上角距离整个图标的左上角的距离为（0，22px）。我想把人人网的订阅图标做为一个链接的背景。采用像素的定位，则整个图标的左上角应该在显示区域的位置应该是（0，-22px），css代码是:background:url(img.jpg) 0 -22px no-repeat。如上图，红色区域为链接的背景，也就是所说的显示区域。

　　在此顺便附上代码：

css代码：.sidebar_rss, .sidebar_rss li{
 float:left;
 117px;
 list-style:none;
}
.sidebar_rss li{
 height:22px;
 padding:0;
 margin:0;
}
.sidebar_rss li a{
 117px;
 height:22px;
 display:block;
 text-indent:-100px;
}
.rss_h23, .bg_rss{
 height:23px;
}
/*背景图片的定位*/
.bg_rss{
 background:url(rss_icons.gif) no-repeat 0px 0px;
}
.bg_renren{
 background:url(rss_icons.gif) no-repeat 0px -22px;
}
.bg_google{
 background:url(rss_icons.gif) no-repeat 0px -44px;
}
.bg_kaixin{
 background:url(rss_icons.gif) no-repeat 0px -66px;
}
.bg_QQmail{
 background:url(rss_icons.gif) no-repeat 0px -88px;
}
/*hover的背景图片位置*/
.bg_rss:hover{
 background:url(rss_icons.gif) no-repeat 6px 0px;
}
.bg_renren:hover{
 background:url(rss_icons.gif) no-repeat 6px -22px;
}
.bg_google:hover{
 background:url(rss_icons.gif) no-repeat 6px -44px;
}
.bg_kaixin:hover{
 background:url(rss_icons.gif) no-repeat 6px -66px;
}
.bg_QQmail:hover{
 background:url(rss_icons.gif) no-repeat 6px -88px;
}

html代码：<ul>
 <li><a href=”">订阅</a></li>
 <li><a href=”" >人人网</a></li>
 <li><a href=”" >谷歌</a></li>
 <li><a href=”" >开心网</a></li>
 <li><a href=”" >QQ邮箱</a></li>
</ul>