CSS 背景

概覽

CSS 背景屬性用於定義HTML元素的背景。

相關的屬性

• background-color: 設置背景顏色

• background-image: 設置背景圖片

• background-repeat: 設置背景圖片是否重複及如何重複

• background-position: 設置背景圖像的位置

• background-attachment: 背景圖像是否固定或者隨着頁面的其他部分滾動

• background: 簡寫屬性，做用是將背景屬性設置在一個聲明中

元素背景的範圍

背景會填充元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。若是邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

瀏覽器支持

全部主要瀏覽器都支持背景屬性。

注意： IE7和更早的版本不支持"繼承"的值（inherit）。 IE8須要定義!DOCTYPE。 IE9支持"繼承"。

背景顏色

background-color 屬性用來定義元素的背景顏色。

body {background-color: #b0c4de;}

CSS中，顏色值一般以如下方式定義:

• 十六進制 - 如：#ff0000

• RGB - 如：rgb(255,0,0)

• 顏色名稱 - 如：red

• 默認 - transparent,透明之意。若是一個元素沒有指定背景色，那麼背景就是透明的。

• inherit 從父元素繼承背景顏色，這個在IE上存在兼容問題。

背景圖像

background-image 屬性用來定義元素的背景圖像。

默認地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。

body {background-image: url('paper.gif');}

提示：背景顏色和背景圖像是能夠共存的，請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可得到良好的視覺效果。

body {background-image: url('paper.gif');background-color:#fff;}

屬性值：

• none - 默認無背景圖像

• url('image path') - 圖像的可訪問路徑，可使用網絡地址，相對路徑地址，絕對路徑地址

• inherit - 從父元素繼承

背景重複

若是須要對背景圖像平鋪，可使用background-repeat屬性。

body {
    background-image: url('gradient2.png');
    background-repeat: repeat-x;
}

屬性值：

• repeat 致使圖像在水平垂直方向上都平鋪，默認。

• repeat-x 和 repeat-y 分別使背景圖像只在水平或垂直方向上重複。

• no-repeat 則不容許圖像在任何方向上平鋪。

• inherit 從父元素繼承。

背景定位

background-position 屬性用來控制背景圖片的位置，通常配合 background-repeat: no-repeat; 使用。

body {
    background-image: url('img_tree.png');
    background-repeat: no-repeat;
    background-position: right top;
}

爲 background-position 屬性提供值有不少方法。首先，可使用一些關鍵字：top、bottom、left、right 和 center。一般，這些關鍵字會成對出現，不過也不老是這樣。還可使用長度值，如 100px，最後也可使用百分數值。

關鍵詞

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

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

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

百分比

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

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

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

把一個圖像放在水平方向 2/三、垂直方向 1/3 處：

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

若是隻提供一個百分數值，所提供的這個值將用做水平值，垂直值將假設爲 50%。

長度值

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

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

背景固定

background-attachment 屬性設置背景圖像是否固定或隨頁面的其他部分滾動。

body {
    background-image:url('image.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

屬性值：

• scroll 默認。背景圖像會隨着頁面其他部分的滾動而移動。

• fixed 當頁面的其他部分滾動時，背景圖像不會移動。

• inherit 從父元素繼承。

簡寫屬性

background 屬性在一個聲明中設置全部背景屬性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}

若是不設置其中的某個值，也不會出問題，好比 background:#ff0000 url('smiley.gif'); 也是容許的。

一般建議使用這個屬性，而不是分別使用單個屬性，由於這個屬性在較老的瀏覽器中可以獲得更好的支持，並且須要鍵入的字母也更少。