CSS中background-position用法與負值定位

先把自己的一些瞭解分享給大家。

1.原點位置，即外層塊元素的左上方
2.background-position 位置設定是指圖片與座標原點的位移量
3.原點是不會動的，移動的是圖片 X座標為正則圖片左上方向右平移，為負則圖片左上方向左平移
4.Y座標為正則圖片左上方向下平移，為負則左上方向上平移
5.百分比的計算是有公式的：X軸( container寬度 – 圖片寬度 )*含符號百分比
6.Y軸( container高度 – 圖片高度)*含符號百分比

再看CSS background-position 文法：

background-position : length || length
background-position : position || position
取值：

length  :? 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱 長度單位 
position  :? top | center | bottom | left | center | right

說明：
設定或檢索對象的背景映像位置。必須先指定 background-image 屬性。
該屬性定位不受對象的補丁屬性( padding )設定影響。
預設值為： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容地區的左上方。
如果只指定了一個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。
如果設定值為 right center ，因為 right 作為橫座標值將會覆蓋 center 值，所以背景圖片將被居右定位。
對應的指令碼特性為 backgroundPosition。

註： 本文中使用的圖片大小為 300px*120px，為了能很清晰的表達圖形的哪部分被隱藏了，按照圖片的大小平均分成了9等份。同時背景圖片容器地區繪製出綠色邊框清晰顯示容器的範圍。
1、background-position:0 0;
背景圖片的左上方將與容器元素的左上方對齊。該設定與background-position:left top;或者background-position:0% 0%;設定的效果是一致的。例如：

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll 0 0;         border:5px solid green;     }

效果如下圖1：

 

 

                                        圖 1

 

2、該屬性定位不受對象的補丁屬性( padding )設定影響。

例如，我們給容器元素增加padding值，背景圖片的左上方還是與容器元素的左上方對齊。在此處只是影響到了容器元素的高度和寬度。

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll 0 0;         border:5px solid green;         padding:50px;     }

效果如圖2：

 

 

                                                   圖 2

 

3、background-position:-70px -40px;

圖片以容器左上方為參考向左位移70px，向上位移 40px，樣本：

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll -70px -40px;         border:5px solid green;     }

效果如圖3：

 

 

                                  圖 3

 

4、background-position:70px 40px;

圖片以容器左上方為參考向右位移70px，向下位移 40px，樣本：

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll 70px 40px;         border:5px solid green;     }

效果如圖4：

 

 

                                   圖 4

 

5、background-position:50% 50%;

圖片水平和垂直置中。與 background-position:center center;效果等同。

等同於x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
等同於y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

 例如：

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll 50% 50%;         border:5px solid green;     }

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如圖5：

 

 

                                     圖 5

 

由於超出部分別往兩端延伸，所以我們可以先製作一張寬度足夠寬圖片設定水平值為50%，這樣可以用來適應不同的瀏覽器，使得圖片水平充滿瀏覽器視窗並且置中。替代margin:50 auto的功能。

6、background-position:-50% -50%;

等同於x：-{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
等同於y：-{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll -50% -50%;         border:5px solid green;     }

效果如圖6：

 

 

                                     圖 6

 

7、background-position:100% 100%;

圖片處於容器元素的右下角，與 background-position:right bottom;效果等同。

樣本：

代碼如下	複製代碼
.container{         width:300px;         height:150px;         background:transparent url(bg.jpg) no-repeat scroll 100% 100%;         border:5px solid green;     }

效果如圖7：

 

 

現在我們來看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;這樣就定義好了,在圖上的量法就看下圖（這張圖相當於你用的效果圖或稱設計圖），記住這張圖相信你一定能掌握背景圖負值的方法了

執行個體代碼

代碼如下

複製代碼

<style type="text/css" > <!-- .style1,.style2,.style3{  float:left;  width:162px;  height:162px;  background:#CCCCCC url(/r2007523163838.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> <div class="style2"> x:-50px,<span class="blue">y:-50px</span> </div> <div class="style3"> x:100px,<span class="blue">y:100px</span> </div>