關於background的一些知識

背景定位:

能夠利用 background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置：

body

  {

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

    background-repeat:no-repeat;

    background-position:center;

  }

爲 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;

  }

百分數值:

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

body

  {

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

    background-repeat:no-repeat;

    background-position:50% 50%;

  }

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

若是圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。若是圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

所以，若是你想把一個圖像放在水平方向 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。這就解釋了背景圖像爲何老是從元素內邊距區的左上角開始平鋪，除非您設置了不一樣的位置值。

長度值:

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

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

body

  {

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

    background-repeat:no-repeat;

    background-position:50px 100px;

  }

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

背景關聯:

若是文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您能夠經過 background-attachment 屬性防止這種滾動。經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed），所以不會受到滾動的影響：

body

  {

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

  background-repeat:no-repeat;

  background-attachment:fixed

  }

background-attachment 屬性的默認值是 scroll，也就是說，在默認的狀況下，背景會隨文檔滾動。