CSS中背景background-position負值定位深入理解

標籤：style   http   io   color   ar   os   sp   div   on   

下面是我要用到的一個背景圖：

代碼如下：

1.<style type="text/css"> <!-- .style1,.style2,.style3{ float:left; width:162px; height:162px; background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat; border:1px dotted #999999; color:red; margin-right:10px; } .style2{ background-position:-50px -50px; } .style3{ background-position:100px 100px; } .blue{ color:blue; } --> </style>   <div class="style1"> x:0,<span class="blue">y:0</span>  <div class="style2"> x:-50px,<span class="blue">y:-50px</span>  <div class="style3"> x:100px,<span class="blue">y:100px</span>     </div></div></div>

HTML頁中是162*162的灰色背景DIV塊並加入三種不同位置的背景圖片，
　　在瀏覽器中看到的效果：

　　從可以看到：當為background-position:0 0;時圖片的左上方與DIV的左上方是重合的，當我們定位於background-position:-50px -50px;時發現圖片向左、上移動了，也就以DIV的左上方為中心，圖向左移動了50PX，向上也移動了50PX．第三個樣本採用的都是正值，可以解解釋為圖向右、向下移動的效果．這個應該是好理解的．
　　總結一下就是以上都是以DIV的0，0點為參考點圖片移動，如果把DIV區解釋為一個座標軸圖，向左，上都為負，向右，下為正值．

　　好象說這麼多你也記不住，那我就告訴你，你應該記住什麼吧！

　　在實踐中多數情況是知道一個圖的位置要如中那個黃色的點，我們應該在上量出它的長度得出兩個值都是150PX,那我們定義圖的位置就要寫background-position:-150px -150px;這樣就定義好了,在圖上的量法就看（這張圖相當於你用的或稱設計圖），記住這張圖相信你一定能掌握背景圖負值的方法了。

CSS中背景background-position負值定位深入理解