CSS背景屬性有哪些？css背景屬性的總結（附代碼）

css背景屬性是用於定義HTML元素背景的，那麼，css背景屬性有哪些呢？像是css背景顏色屬性，css圖片背景屬性都屬於css背景屬性，本文將給大家總結一下css背景屬性中相關的屬性。

首先，我們來看一下css相關的屬性：

• background-color: css設定背景顏色

• background-image: css設定圖片背景

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

• background-position: css設定背景映像的位置

• background-attachment: 背景映像是否固定或者隨著頁面的其餘部分滾動

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

元素背景的範圍：

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

瀏覽器支援：

所有主要瀏覽器都支援背景屬性。

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

css背景顏色：

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

body {background-color: #b0c4de;}

CSS中，顏色值通常以以下方式定義:

• 十六進位 - 如：#ff0000

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

• 顏色名稱 - 如：red

• 預設 - transparent,透明之意。如果一個元素沒有指定背景色，那麼背景就是透明的。

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

css圖片背景：

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

預設地，背景圖片位於元素的左上方，並在水平和垂直方向上重複。

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

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

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

屬性值：

• none - 預設無背景圖片

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

• inherit - 從父元素繼承

css背景重複：

如果需要對背景普片平鋪，可以使用background-repeat屬性。

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

屬性值：

• repeat 導致映像在水平垂直方向上都平鋪，預設。

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

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

• inherit 從父元素繼承。

css背景定位：

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/3、垂直方向 1/3 處：

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

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。

長度值：

長度值解釋的是元素內邊距區左上方的位移。位移點是映像的左上方。

比如，如果設定值為 50px 100px，映像的左上方將在元素內邊距區左上方向右 50 像素、向下 100 像素的位置上。

css背景固定：

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'); 也是允許的。

通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。

相關文章推薦：

你不知道的CSS背景—css背景屬性全解

詳解css之背景background屬性