下面為大家帶來一篇CSS background全部總結。內容還挺不錯的，現在就分享給大家，也給大家做個參考。
所有背景屬性都不能繼承。
1. background-color
所有元素都能設定背景顏色。
background-color的預設值是transparent；也就是說，如果一個元素沒有指定背景顏色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。
2. background-image
所有元素都能設定背景圖像；
背景圖像可以設定多個，中間用逗號隔開；背景影像會層疊，寫在前面的層次在上面。
3. background-repeat
repeat（預設）/no-repeat/repeat-x/ repeat-y
##4. background-attachment
scroll（預設）/fixed
5. background-position
6. background-size
設定背景圖片的尺寸；預設值為auto。 像素法：第一個值設定寬度，第二個值設定高度；若只有一個值，第二個值為auto。 百分比法：以父元素的寬度和高度以基準來計算。 關鍵字cover，不改變影像寬高比例，在水平和垂直方向都鋪滿整個元素，有可能導致一部分影像溢出。 關鍵字contain，不改變影像寬高比例，盡可能拉伸，直到某一方向鋪滿整個元素，有可能導致另一方向沒有鋪滿。7. background-origin
定義背景圖片的初始位置border-box，邊框左上角。 padding-box，padding區域左上角；預設值。 content-box，內容區左上角。8. background-clip
The CSS3 background-clip property specifies the painting area of the background.The property takes three different values: •border-box - (default) the background is painted to the outside edge of the border•padding-box - the background is painted to the outside edge of the padding•content-box - the background is painted within the content box（英文的解釋得比較清楚）（英文都是從W3Schools Online搬運）
關於background-origin和background-clip，它們是互相獨立的，互不干擾。
關於background的CSS寫法，個人認為應該邏輯明確、層次分明；具體而言：
background定義背景圖像，background- color定義背景顏色，background-clip定義背景顯示區域。
（個人見解，僅供參考）Full Size Background ImageIf we want to have a background image on a website that covers the entire browser window at all times.The requirements are as follows:• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the back-size propertyd #
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}小tips：利用背景影像的水平平鋪，實現波浪式的邊框效果。
（目前只有想法，還沒找到符合需求的圖像。）
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
關於CSS3開啟硬體加速的使用與陷阱關於CSS程式碼如何書寫規格#
以上是關於CSS background的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
