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中，顏色值通常以以下方式定義:
css圖片背景：
background-image 屬性用來定義元素的背景圖片。
預設地，背景圖片位於元素的左上角，並在水平和垂直方向上重複。
body {background-image: url('paper.gif');}登入後複製
提示：背景顏色和背景圖片是可以共存的，請設定一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。
body {background-image: url('paper.gif');background-color:#fff;}登入後複製
屬性值：
##css背景重複：
如果需要對背景普片平鋪，可以使用background-repeat屬性。
body {
background-image: url('gradient2.png');
background-repeat: repeat-x;
}登入後複製
屬性值：
- repeat 導致影像在水平垂直方向上都平鋪，預設。
- repeat-x 和 repeat-y 分別使背景影像只在水平或垂直方向上重複。
- no-repeat 則不允許影像在任何方向上平鋪。
- inherit 從父元素繼承。
css背景定位：
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;
}登入後複製
属性值：
简写属性：
background 属性在一个声明中设置所有背景属性。
body {
background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}登入後複製
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
以上是CSS背景屬性有哪些？ css背景屬性的總結（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
