CSS背景-background
- 復合屬性—background
如果同時設置了background-color和background-image時，背景顏色會被圖片覆蓋。
background-image: 用作背景的圖片，background:url( )；
如果將背景設置為圖片，那麽我們就要考慮以下幾個屬性了。
background-repeat:
repeat-x:橫向平鋪
repeat-y:縱向平鋪
round：背景圖像自動縮放直到適應且填充滿整個容器。
space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。
repeat：背景圖像在橫向和縱向平鋪，默認值。
no-repeat:不平鋪
background-size:
具有兩個參數，值既可以是px也可以是%或者是auto（默認）。若只有一個參數，則為寬度，高度等比例縮放，如果背景圖片的尺寸超過容器，將會被裁切。若有兩個參數，則為寬高。
cover：背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器，不過超出的部分將會被裁切。
contain:此屬性值可以將背景圖片等比例放大或者縮小。contain只要求某一個方位上將容器覆蓋，比如縱向或者橫向能夠最小程度將容器覆蓋。
background-position:確定背景圖片的位置
background-position : length || position
length:<percentage> | <length>
position：left center|left top| ……
1、background-position:0 0；
背景圖片的左上角將與容器元素的左上角對齊。該設置與background-position:left top;或者background-position:0% 0%;設置的效果是一致的。該屬性定位不受元素的 padding影響，例如，我們給容器元素增加padding值，只是影響了容器元素的高度和寬度，背景圖片的左上角還是與容器元素的左上角對齊。
2、background-position:-10px -20px;
圖片以容器左上角為參考向左偏移10px，向上偏移 20px，
3、background-position:50% 50%;
圖片水平和垂直居中。與 background-position:center center;效果等同。
等同於x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
等同於y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。
x=(300-178)*50%=61px y=(300-108)*50%=96px
4、background-position:100% 100%;
圖片處於容器元素的右下角，與 background-position:right bottom;效果等同。
background-attachment：定義用戶滾動頁面時背景圖片會發生什麽。
scroll:默認值，背景圖相對於元素固定，背景隨頁面滾動而移動，即背景和內容綁定。
但是有一種情況例外：對於可以滾動的元素（設置為overflow:scroll的元素）。當background-attachment設置為scroll時，背景圖不會隨元素內容的滾動而滾動。
fixed：背景圖相對於視口固定，就算元素有了滾動條，背景圖也不隨內容移動，好像背景圖片被釘到了視窗上一樣。
local：背景圖相對於元素內容固定。
背景圖片會隨著頁面其余部分的滾動而移動。但如果內容是可以滾動的元素（設置為overflow:scroll的元素），背景圖會隨元素內容的滾動而滾動，因為背景圖是相對於元素自身內容定位，開始固定，元素出現滾動條後背景圖隨內容而滾動。
這就是關於background這個復合屬性的一些基本知識啦~
CSS背景-background