background-position值为像素时的使用方法 - 老鼠扛着刀
以前一直都知道这个属性，但是每次使用的时候都是试来试去，感觉很麻烦，所以花了一点小时间研究了一下，很简单，跟大家分享一下。
此属性需要在background属性中使用，有关background属性的值简单介绍：
background:[background-color][background-image][background-repeat][background-attachment][background-position]|inherit
每一个代表什么意思就不讲了，会点英语的都知道，正式开始讲用法，上例子：
CSS如下：
<style type=”text/css”>
.ee
{
background:url(/images/tag_group.jpg) no-repeat 0px 0px;
}
.ff
{
background:url(/images/tag_group.jpg) no-repeat -103px 0px;
}
.gg
{
background:url(/images/tag_group.jpg) no-repeat 0px -34px;
}
.hh
{
background:url(/images/tag_group.jpg) no-repeat -103px -34px;
}
#linkContainer a
{
font-weight:bold;color:White;text-decoration:none;display:block;padding-top:8px;padding-bottom:8px;width:102px;text-align:center;border-radius:5px;height:16px;
}
</style>
html代码如下：
<div id=”linkContainer”>
<div style=”color:#fff;float:left;”><a href=”#” class=”ee” id=”link”>问题情境</a></div>
<div style=”color:#fff;float:left;”><a href=”#” class=”ff” id=”link1″>理论导学</a></div>
<div style=”width:100px;height:10px;clear:left;margin-top:10px;”></div>
<div style=”color:#fff;float:left;”><a href=”#” class=”gg” id=”A1″>问题情境</a></div>
<div style=”color:#fff;float:left;”><a href=”#” class=”hh” id=”A2″>理论导学</a></div>
</div>
背景图片：
最终效果图：
background:url(/images/tag_group.jpg) no-repeat 0px 0px; 代表图片左上角
background:url(/images/tag_group.jpg) no-repeat -103px 0px; 代表将此图片向左平移103px,Y轴方向不变
background:url(/images/tag_group.jpg) no-repeat 0px -34px; 代表将此图片X方向不变,Y轴方向向上平移34px
剩下那个自己揣摩，相当Easy！当然background-position属性的值还有百分比和left,top之类的值，意思差不多，具体的网上一抓一大把，不浪费口舌了。多谢参考。