CSS中背景background-position負值定位深入理解_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
CSS中背景定位background-position負值一直是不好理解的難點，一方面用的比較少，另一方面的理解的不夠深入，今天花了點時間認真的思考了，把我的心得寫出來．
下面是我要用到的一個背景圖：
運行下面代碼：
[ 可先修改部分代碼 再運行查看效果 ]
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;這樣就定義好了,在圖上的量法就看下圖（這張圖相當于你用的效果圖或稱設計圖），記住這張圖相信你一定能把握背景圖負值的方法了
本文作者：purecss
下面是我要用到的一個背景圖：
運行下面代碼：
代碼調試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
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;這樣就定義好了,在圖上的量法就看下圖（這張圖相當于你用的效果圖或稱設計圖），記住這張圖相信你一定能把握背景圖負值的方法了
本文作者：purecss
相關CSS教程：
- 相關鏈接：
- 教程說明：
CSS教程-CSS中背景background-position負值定位深入理解
。