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之類的值，意思差很少，具體的網上一抓一大把，不浪費口舌了。多謝參考。