background可以幫助前端er們豐富元素的背景，讓網頁更加絢爛，是乙個使用頻率很高的屬性。首先，我們會先介紹background-color、background-image、background-repeat、background-attachment、background-position基礎屬性。1 background-color : 為元素設定背景顏色，會填充元素的內容、內邊距、邊框。如果邊框有透明部分，會透過這些透明部分顯示出背景色
值：
color_name 如：red
hex_number 如：#f00
rgb_number 如：rgb(0,0,0)
transparent 預設，透明
inherit 繼承父元素
url 路徑
none 不顯示背景
inherit 父元素繼承
repeat 預設。背景影象將在垂直方向和水平方向重複
repeat-x 背景影象將在水平方向重複
repeat-y 背景影象將在垂直方向重複
no-repeat 背景影象不重複
inherit 繼承父元素
scroll 跟隨頁面滾動
fixed 固定
inherit 繼承父元素
top/left/center/right/bottom
x% y% （相對于父元素的位置）
xpos ypos
tips:background-position一般最多運用在雪碧圖當中來移動背景的位置。
如果我們將該看成是一張雪碧圖，想只展示從嘴巴往右及往下的部分則可以利用background-position將往左移動，將嘴巴部分移動到原點展示
像以上所有的屬性，其實可以加些成以下形式：background:color image repeat fixed postion
在css3，背景相關的屬性在原有的基礎上，新增了background-size、background-origin 、background-clip 。下面一一講解一下~6 background-size ：規定背景影象的尺寸
值：
length 第乙個值是寬度，第二值是高度；如果只設定乙個值，第二個值預設是auto
percentage 以父元素的百分比來設定寬度和高度；如果只設定乙個值，第二個值預設是auto
cover 把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域
contain 把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。
tips:可以看出來背景是相對於padding-box為起始位置繪製，不過，右側和下側的透明border還會被繪製
6.2 將元素的background-size設定成contain，（100*133）長》寬，會把的最長邊去擴大至適應到元素對應的邊，將全部展示在元素上。
6.3 不設定background-size，（225*300）長》寬，會按照原始尺寸展示在元素內。
tips:1.這裡用的比較多的是在移動端的背景，我們的設計師一般設計的移動端設計稿為三倍圖。我們在運用到頁面上時，一般會在原來的尺寸基礎上縮小三倍。
2.這裡建議x方向設定為具體值，y方向設定為auto。一方面，y向的尺寸會自動計算自適應；二方面，以後雪碧圖有修改，可以直接在y方向上增加，不用再修改**。不至於因為修改了沒有修改**帶來bug。
7 background-origin 規定了background-position屬性相對於什麼位置來定位
值：
padding-box 相對於內邊距來定位(預設)
border-box 相對於邊框盒來定位
content-box 相對於內容框來定位
給元素新增background-origin:content-box 可以看出來，背景是相對於內容框開始繪製
不同屬性設定對比
8 background-clip 規定背景的裁剪區域（顏色設定等）
值：
border-box 相對於內邊距來裁剪
padding-box 相對於內邊距來裁剪
content-box 相對於內容框來裁剪
給元素新增background-clip:content-box 可以看出來，背景還是相對於padding-box開始繪製，只是新增這裡之後元素會裁剪背景，只展示content-box內的背景（這裡區分 background-origin 和 background-clip的區別）
不同屬性設定對比
background學習總結
background background red background color red 基於background的控制,達到能控制雪碧圖的控制?repeat y軸重複 body x軸重複 body background xpos ypos 大小.bg1 寬度保持原圖大小,高度百分之50 我估計...
background簡寫屬性
在css中有多個屬性用於設定背景樣式，其中 background color 設定背景顏色。background repeat 設定是否以及如何重複背景影象 background position 設定背景影象的起始位置 background attachment 設定背景影象是否固定或者隨著頁面的...
background 線性漸變
background linear gradient direction,color stop1,color stop2,linear gradient to left right top bottom 取值 下述值用來表示漸變的方向，可以使用角度或者關鍵字來設定 順時針方向角度 用角度值指定漸變的...