如果想讓一個區域具有純色的背景，可以使用background-color進行設置，背景顔色可以是rgb，rgba，#16網頁色。
背景顔色
如果想加入背景圖片，請使用background-image:url();進行設置。
請注意：背景圖片默認不會改變原本盒子的大小。與在盒子中插入<img>是不同的。
背景圖片
我們可以将背景設置為盒子的某一區域，比如content區域或者padding區域以及border區域。
請使用background-clip來進行指定。
選項說明border-box包括邊框padding-box不含邊框，包括内邊距content-box内容區域
背景剪裁
如果背景圖太小，那麼默認會進行重複行為，如下所示。但是我們可以使用background-repeat為它指定如何重複。
選項說明repeat水平、垂直重複repeat-x水平重複repeat-y垂直重複no-repeat不重複space背景圖片對稱均勻分布
不指定，默認repea：
指定為no-repeat：
取消背景重複
我們可以使用background-attachment為背景指定到底是跟随滾動條滾動還是在一個固定的位置不滾動。默認是scroll，即跟随滾動條滾動的。
選項說明scroll背景滾動fixed背景固定
背景固定
我們可以使用background-position設置背景圖片的水平、垂直定位。
選項說明left左對齊right右對齊center居中對齊top頂端對齊bottom底部對齊
隻設置center為水平，垂直居中。
設置left center則為水平居左，垂直居中。
設置right center則為水平居右，垂直居中。
設置center left則為水平居中，垂直居左。
設置center right則為水平居中，垂直居右。
當然，我們也可以使用%來為它進行設置，P為居中。
背景位置
我們可以使用background-size來設置背景尺寸，單位可以是單詞，%，px，em以及rem。
當使用單詞設置的時候一個詞就可以搞定，而其他設置時需要兩個單位，第一個為背景高度，第二個為背景寬度。
選項說明cover背景完全覆蓋，可能會有背景溢出contain圖片不溢出的放在容器中，可能會漏出部分區域
指定數值定義寬高尺寸
複制代碼
background-size: 50% 100%;
或
background-size: 200px 200px;
寬度固定高度自動（這個常用）
複制代碼
background-size: 50% auto;
背景尺寸
我們可以直接使用background來進行簡寫。
推薦順序：顔色，地址，是否重複，背景裁剪，背景尺寸或是否跟随滾動
如：
複制代碼
background:red url(./33.jpg) no-repeat border-box center;
我們可以使用background-image: url(路徑), url(路徑);來一次指定多個背景。
就如同上面一樣，我們一次給他定義了2個背景一個紅色，一個圖片。
我們可以使用 box-shadow 對盒子元素設置陰影，參數為 水平偏移,垂直偏移,模糊度,顔色 構成。
背景陰影
漸變一般都是在背景顔色中進行使用，格式為background: linear-gradient(方向, 顔色, 顔色, ...);。
複制代碼
/* 紅色到綠色，可以看到是線性的漸變 */
background: linear-gradient(red, green);
使用度數deg可以改變漸變角度，如果為負數則代表相反方向。
複制代碼
/* 傾斜30°，紅色到綠色 */
background: linear-gradient(30deg, red, green);
我們可以使用to 方向1 方向2指定漸變的方向，注意：不能用度數deg同時使用
複制代碼
/* 向右漸變 ，紅色到綠色 */
background: linear-gradient(to right, red, green)
複制代碼
/* 向左漸變 ，紅色到綠色 */
background: linear-gradient(to left, red, green)
複制代碼
/* 向左上漸變 ，紅色到綠色 */
background: linear-gradient(to left top, red, green)
複制代碼
/* 向右下漸變 ，紅色到綠色 */
background: linear-gradient(to right bottom, red, green)
同時，我們可以設置多顔色漸變。
複制代碼
/* 向右漸變 ，紅色到綠色到藍色到黃色 */
background: linear-gradient(to right, red, green, blue, yellow)
格式為background: radial-gradient(方向, 寬度, 顔色, 顔色, ...);。
複制代碼
/* 紅色到綠色，可以看到是徑向的漸變 */
background: radial-gradient(red, green);
我們可以設置漸變色的寬度。
複制代碼
/* 紅色到綠色，設置寬度 */
background: radial-gradient(50px 50px,red, green);
我們可以使用at 方向1 方向2來進行漸變方向控制。
複制代碼
/* 紅色到綠色，漸變方向為右上，由于設置了寬度，效果并不美觀。*/
background: radial-gradient(at right top ,red 200px, green 20px);
複制代碼
/* 紅色到綠色，漸變方向為左下，由于設置了寬度，效果并不美觀。*/
background: radial-gradient(at left bottom ,red 200px, green 20px);
複制代碼
/* 紅色到綠色，漸變方向為左側向中心，由于設置了寬度，效果并不美觀。*/
background: radial-gradient(at left center ,red 200px, green 20px);
複制代碼
/* 紅色到綠色，漸變方向為底部向中心，由于未設置寬度，效果好一些了*/
background: radial-gradient(at bottom center ,red, green);
}
我們依然可以設置很多顔色來進行漸變。
複制代碼
/* 紅色到綠色到藍色到黃色，漸變方向為底部向中心，由于未設置寬度，效果好一些了*/
background: radial-gradient(at bottom center ,red, green ,blue ,yellow);
}
當未指定标識位時，顔色的漸變很均勻。一旦指定了标識位，就會發生突變。
未設置标識位：
單方設置了标識位：
複制代碼
background: linear-gradient(90deg, red 60%, blue);
雙方設置了标識位：
複制代碼
background: linear-gradient(90deg, red 60%, blue 40%);
使用徑向标識位繪制太陽
徑像漸變繪制小太陽
所謂中間點阈值，指的就是兩個顔色漸變的時候，從哪個點開始讓一個顔色漸變到另一個顔色。
比如這個示例，紅色标識位為60%，藍色标識位為40%，漸變的中間點阈值就隻能變成0了。
再比如這個示例，單方設置了标識位，那麼它的阈值就是由系統産生的，所以我們才能看見它漸變的效果。
怎麼設置中間點阈值呢？看下面這段代碼。
複制代碼
/* 0%就是中間點阈值，當設置為0後那麼紅色變藍色會由0%的位置開始 */
background: linear-gradient(90deg, red ,0%, blue);
複制代碼
/* 我們的中間點阈值是20%，先是紅色占了10%，那麼可觀測範圍中中間點阈值也就隻有10%了，所以上圖的漸變區域為10% */
background: linear-gradient(90deg, red 10% ,20%, blue 80%);
要想使用線性漸變重複，請使用repeating-linear-gradient。
複制代碼
/* 一個格子為 75px */
background: repeating-linear-gradient(90deg, blue, 25px, red 50px);
如果我們想要生硬的顔色，我們還需要再随便加一個顔色充當過渡。
複制代碼
background: repeating-linear-gradient(90deg, blue, 25px, yellow 25px, 25px, red 50px);
要想使用線性漸變重複，請使用repeating-radial-gradient。
複制代碼
background: repeating-radial-gradient(20px 20px, red 0%, yellow 20%, blue 30%, green 50%);
如果你還對标識位，中間點有什麼疑惑，那麼可以仔細找一找代碼中的規律。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
