背景和字體一樣，是一個復合屬性，而且它是一個使用頻率很高的屬性。在CSS3中，背景屬性在保持以前用法的同時，增加了新的相關屬性。本文將詳細介紹關於背景的知識
背景色接受所有合法的顏色，還可以接受一個使背景透明的關鍵字。關於顏色的設置請移步至此。背景顏色不能繼承。其默認值是transparent，如果一個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。
值: <color> | transparent | inherit
初始值: transparent
應用於: 所有元素
繼承性: 無
背景圖像會放在所指定的背景顏色之上。不過對於有alpha通道的圖像格式，如PNG，可能會部分或完全透明，這會導致圖像與背景色結合。另外，如果出於某種原因無法加載圖像，背景色會取代圖像
值: <url> | none | inherit
初始值: none
應用於: 所有元素
繼承性: 無
背景圖像默認從一個元素的左上角padding-box開始平鋪，但其從各個方向朝外面平鋪，包括border區域。背景平鋪的屬性值中space和round是CSS3新增的值。space表示背景圖像的兩端對齊平鋪，多出來的空間用空白代替；round也表示背景圖像的兩端對齊平鋪，但多出來的空間通過自身拉伸來填充
[注意]space和round這兩個新增屬性值firefox、safari和IE9-浏覽器不支持
[注意]背景平鋪可以寫空格間隔的兩個值，分別代表橫軸值和縱軸值，但這種寫法IE8-浏覽器不支持。寫法為background-repeat: repeat no-repeat
值: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit
初始值: repeat
應用於: 所有元素
繼承性: 無
值: [[<percentage] | <length> | left | center | right] [<percentage>] | <length> | top | center | bottom ] ? ] || [[left | center | right] || [top | center | bottom]] | inherit
初始值: 0% 0%
應用於: 全部元素
繼承性: 無
百分數: 相對於元素和原圖像的相應點
【寫法】
【1】關鍵字
x(水平方向):
left: 圖的左側和元素左側對齊
center:圖的中間和元素中間對齊
right:圖的右側和元素右側對齊
y(垂直方向):
top: 圖的頂部和元素頂部對齊
center:圖的中間和元素中間對齊
bottom:圖的底部和元素底部對齊
[注意]單一關鍵字：當某一方向的關鍵字為center時可省略
【2】具體值
x(水平方向)：
正值從左向右移動，負值從右向左移動
y(垂直方向)：
正值從上向下移動，負值從下向上移動
[注意]頁面左上角為原點(0,0)點
[注意]背景圖像移出到元素范圍外的部分不顯示
【3】百分比
x%(水平方向)：
背景圖像的x%對應元素的x%
y%(垂直方向)：
背景圖像的y%對應元素的y%
[注意]若只寫了一個值，另一個值將是50%
值: scroll | fixed | inherit
初始值: scroll
應用於: 所有元素
繼承性: 無
scroll：背景圖片會隨著頁面其余部分的滾動而移動。但如果它自己是可以滾動的元素，背景圖不會隨元素內容的滾動而滾動(默認值)
fixed：原圖像不會隨文檔滾動，且原圖像的放置由可視區的大小確定，而不是由包含該圖像的元素的大小 或在可視區中的位置決定。在浏覽器中，隨著用戶調整浏覽器窗口的大小，可視區可能會改變。這會導致背景的原圖像隨著窗口大小的改變移動位置。所以某種意義上說，圖像並不是固定的，它只是在可視區大小不改變的情況下保持固定
[注意]IE6-浏覽器無法處理非body元素上的固定關系
local：背景圖片會隨著頁面其余部分的滾動而移動。但如果它自己是可以滾動的元素，背景圖會隨元素內容的滾動而滾動
[注意]local屬性值IE8-浏覽器不支持
背景原點屬性主要用來決定背景定位屬性的參考原點，即決定背景圖片定位的起點。在默認情況下，背景圖片的背景定位屬性總是以元素左上角為坐標原點對背景圖片進行背景定位。而背景原點屬性可以根據自己的需求來改變背景圖片的背景定位起始位置
background-origin: padding-box || border-box || content-box
padding-box: 默認值，決定背景定位起始位置從padding的外邊緣開始顯示背景圖片
border-box: 決定背景定位起始位置從border的外邊緣開始顯示背景圖片
content-box: 決定背景定位起始位置從content的外邊緣開始顯示背景圖片
[注意]如果將background-attachment設置為fixed，background-origin將不起任何作用
背景裁切屬性用來定義背景圖像的裁剪區域。同背景原點的屬性有幾分相似
background-clip: padding-box || border-box || content-box
在webkit內核下支持text屬性
-webkit-background-clip: text;
配合-webkit-text-fill-color: transparent;的屬性可以使文字顏色呈現背景圖像的效果
使用background-size屬性可以指定背景圖片的尺寸，可以控制背景圖片在水平和垂直兩個方向的縮放，也可以控制圖片拉伸覆蓋背景區域的方式，甚至還可以截取背景圖片。背景圖片能夠自適應元素盒子的大小，實現與模塊大小完全適應的背景圖片，避免了因區塊尺寸不同而需要設計不同的背景圖片
背景尺寸的特性有如下用途:在流體布局或者響應式布局中，確保背景圖像能夠始終適配容器大小；對於平鋪的重復性背景圖像，可以確保背景圖像不會有截斷效果；在流體布局中縮放背景圖像來偽造出多列分欄效果；解決Retina屏幕雙倍像素下背景圖像模糊問題；使用鏈接或者列表元素的背景圖像能和文本一起進行縮放
當背景尺寸屬性為固定數值或百分比值時可以設置兩個值，也可以設置一個值。只取一個值時，指定了背景圖片的寬度，第二個值相當於auto，也就是指定了高度。在這種情況下，auto值設定之後能夠讓背景圖片的高度自動地按照比例縮放
background-size: auto || <length> || <percentage> || cover || contain
auto: 默認值，將保持背景圖片的原始高度和寬度
<length>: 取具體的整數值
<percentage>: 取百分比，相對於元素的寬度和padding的總和來計算
cover: 將背景圖片放大，以適合鋪滿整個容器。但這種方法會致使背景圖片失真。常與background-position: center配合來制作滿屏背景效果。缺點是需要制作一張足夠大的背景圖片，否則在較大分辨率浏覽器下會使背景圖片失真
contain: 保持背景圖像本身的寬度比例，將背景圖像縮放到寬度或高度正好適應所定義背景容器的區域
在使用CSS3之前，每個容器只能指定一張背景圖像，因此每當需要增加一張背景圖像時，必須至少添加一個容器來容納它。使用偽元素顯示附加圖片其實就是嵌套HTML標簽實現多背景圖像的變身，通過:after和:before等偽元素生成附加元素來放置背景圖像，表面上比直接嵌套HTML標簽更干淨一些，但其實是換湯不換藥
通過CSS3的多背景屬性，HTML標記就不需要任何修改，在CSS的background-image或者background屬性中列出需要使用的所有背景圖像，用逗號分隔開。而且每張圖片都具有background中的屬性
CSS3多背景有層次之分，按照浏覽器中顯示時圖像疊放的順序從上到下指定，最先聲明的背景圖像將會居於最上層，最後指定的背景圖像將置於最底層
除了背景顏色之外，其他的屬性都可以設置多個屬性值，前提是元素有多個背景圖像存在
對於不兼容多背景的浏覽器來說，多背景屬性寫在單一背景屬性的後面，而且還要確保這張單一背景圖像確實可用。這是處理兼容CSS3多背景特性兼容的常用方案
background: [background-image] | [background-color] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-origin] | [background-clip],*
[注意]若background在background-origin和background-clip中僅存在一個值，則該值為background-clip；若存在兩個值，則前面為background-origin，後面為background-clip