背景圖像座標定位

實際上，若是沒有發明image標籤，可能就沒有網頁設計師這門職業。

然而對image標籤的濫用可能致使純修飾性的圖像把頁面弄亂。好在CSS使咱們可以在頁面上顯示圖像，而不須要讓圖像成爲標記的一部分。實現方法是將圖像做爲背景添加到現有的元素中。

 背景圖像基礎：

默認狀況下，瀏覽器垂直和水平的重複顯示背景圖像，讓圖像平鋪整個頁面。

漸變效果：目前漸變很是時髦，你可能但願在頁面上應用垂直漸變，爲此須要建立一個很高可是很窄的漸變圖像，而後將這個圖像應用於頁面的主體，並讓他水平平鋪。

由於這個漸變圖像的高度是固定的，因此若是頁面內容的長度超過了圖像高度，那麼漸變會忽然中止，解決方法是，再添加一個背景色，由於背景圖像老是出如今背景顏色的上面，因此當圖像結束時，背景顏色就會顯示出來。

 小技巧：

1. 設置一個空的DIV，而後設置其ID，將DIV的尺寸設置爲與圖像相同，圖像做爲其背景應用並指定不重複。
2. 設置背景圖像的位置（屬性名稱：background-position），例如：background-position：left center;（使用關鍵字）。還可使用像素或百分比等單位設置圖像位置。可是注意，使用像素設置背景位置，圖像左上角到元素左上角的距離爲指定的像素數。可是，使用百分比，並非對背景圖像的左上角進行定位，而是使用圖像上的一個對應點，因此，若是指定垂直和水平位置都是20%，那麼其實是在將圖像上距離圖像左上角20%的點（圖像上的對應點），定位到距離父元素左上角20%的位置（說白了就是各自找到20%點的位置，而後重合在一塊兒就行了，詳見下面文字解釋）。

建議：最好不要混合使用關鍵字和單位。

 一、background-position:0 0;

背景圖片的左上角將與容器元素的左上角對齊。該設置與background-position:left top;或者background-position:0% 0%;設置的效果是一致的。

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

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

爲 background-position 屬性提供值有不少方法。首先，可使用一些關鍵字：top、bottom、left、right 和 center。一般，這些關鍵字會成對出現，不過也不老是這樣。還可使用長度值，如 100px 或 5cm，最後也可使用百分數。不一樣類型的值對於背景圖像的放置稍有差別。

 

關鍵字：

圖像放置關鍵字最容易理解，其做用如其名稱所代表的。例如，top right 使圖像放置在元素內邊距區的右上角。

根據規範，位置關鍵字能夠按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另外一個對象垂直方向。

若是隻出現一個關鍵字，則認爲另外一個關鍵字默認是 center。

因此，若是但願每一個段落的中部上方出現一個圖像，只需聲明以下：

p {

    background-image:url('bgimg.gif');

    background-repeat:no-repeat;

    background-position:top;

  }

下面是等價的位置關鍵字：

單一關鍵字	等價的關鍵字
Center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

 

 

百分數值：

百分數值的表現方式更爲複雜。假設你但願用百分數值將圖像在其元素中居中，這很容易：

body {

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:50% 50%;

  }

KEY:  這會致使圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述爲 50% 50% 的點（中心點）與元素中描述爲 50% 50% 的點（中心點）對齊（重合）。

例如：若是圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。若是圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。（也就是top,left,bottom,center…均可以對應0%，100%和50%）

所以，若是你想把一個圖像放在水平方向 2/三、垂直方向 1/3 處，能夠這樣聲明：

body {

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:66% 33%;

  }

若是隻提供一個百分數值，所提供的這個值將用做水平值，垂直值將默認爲50%。這一點與關鍵字相似。

background-position 的默認值是 0% 0%，在功能上至關於 top left。這就解釋了背景圖像爲何老是從元素內邊距區的左上角開始平鋪，除非您設置了不一樣的位置值。

 

舉例說明：

 background:#FFF url(image) no-repeat fixed 50% -30%;

這個時候圖片應該在容器的什麼位置呢,算法公式以下：

圖片左頂點距容器左頂點的座標位置爲 

x：（容器的寬度-圖片的寬度）x50% 

 y：（容器的高度-圖片的高度）x（-30%） 

獲得的結果應用座標法則，差值若是爲負數，百分比爲正那麼運算結果是負值。若是差值爲負數，百分比也爲負數，那麼運算結果就是正數。總而言之就是這裏的運算符合運算法則。把運算的結果帶入座標法則就能獲得圖片的位置。 

好比：

容器是width：600px；height：600px；

圖片是width：200px；height：200px； 
咱們用上面的樣式，能夠獲得圖片位置爲：

x：(600px-200px)*50% 
y：(600px-200px)*(-30%) 

 

長度值：

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。

好比，若是設置值爲 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：

body{

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:50px 100px;

  }

注意，這一點與百分數值不一樣，由於偏移只是從一個左上角到另外一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。

例如在一個寬高均爲300px的容器中，使用：
background-position: 150px 150px;

能夠看到背景圖片的左上角頂點（座標0,0）定位到了齊容器的中心點（座標150px,150px）。

而把150px替換爲50%，使用background-position: 50% 50%;

看到的並不是以下的效果：


而是這樣：


可見，CSS計算出了背景圖片的中心點。這也能夠解釋爲何咱們在使用：

background-position: 100% 100%;

定位的時候，圖片被放置在容器的右下角，而並無跑出容器。（若是使用 background-position: 300px 300px; 的話，背景圖片會被移出容器）
一樣，若是使用：

background-position: 20% 20%;

會將背景圖片的座標點(20%,20%)定位到容器的座標點(20%,20%)。

 

另外能夠參考：http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html