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之类的值，意思差不多，具体的网上一抓一大把，不浪费口舌了。多谢参考。

background-position值为像素时的使用方法

原文：http://www.cnblogs.com/xu-gang/p/3539478.html