1，有利於代碼維護，有利於使用debug進行調試打斷點。
2，后面三個都存在計算，所以分開寫最好。
背景復合屬性最好的寫法，
background:#abcdef url() no-repeat 50px 100px scroll;
background-clip:border-box/padding-box/content-box;
background-origin:border-box/padding-box/content-box;
background-size:cover/contain/length/percentage;
background-color:color/rgb/#000/transparent; 最后一個是透明。
background-image: url(); 背景圖片
background-repeat: no-repeat/repeat/x-repeat/y-repeat; 背景重復
background-position: length/% length/%; 水平位移 垂直位移。此外還有 top center,top right,top left,bottom center,bottom right,bottom left,bottom center,如果只有一個值，left=left center。
background-attachment: scroll/fixed; 跟隨滾動條(默認) 固定。
background: #abcdef url() no-repeat 50px 100px scroll;
background-clip: border-box/padding-box/content-box; 背景在哪里開始顯示，背景被切到哪里。
background-origin: border-box/padding-box/content-box;相對於background-position以邊框(內邊距，內容)盒子左上角頂點為圓點進行位置偏移。
background-size:contain; 圖片遵循等比例縮放，直到整張圖片剛剛在整個div中就立馬停（圖片和div寬高總有一個相等）
background-size:cover; 圖片遵循等比例縮放，直到整張圖片剛剛好覆蓋整個div就立馬停（圖片和div寬高總有一個相等）
background-size: 50%; 默認設置兩個值：width:50%; height:auto;。如只設置一個，默認height:auto; 圖片的高等比例縮放，並不等於50%，這里50%是相對父元素div的寬度進行計算。
background-size有如下值：
A、length，設置背景圖片的高和寬
B、cover，把背景圖片擴展至足夠大，以使背景圖片完全覆蓋區域
C、percentage，以父元素的百分比來設置圖像的寬度和高度
D、contain，把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域
A、background-clip指定背景顯示的范圍 border-box padding-box content-box
B、background-size屬性指定背景圖片的尺寸大小
C、background-origin屬性指定背景圖片的繪制起點 border-box padding-box content-box
D、background-position屬性是CSS2的，用來定位圖片的位置
background-clib: border-box;
A、border-box，背景被剪裁到邊框盒
B、padding-box，背景被剪裁到內邊距框
C、content-box，背景被剪裁到內容框
border：20px solid transparent; 20px的實線邊框是透明的。
background: url('image/1.jpeg') no-repeat 0px 0px scroll;
background-clip: border-box; 邊框，內邊距，內容顯示背景圖 默認值。
background-clip: padding-box; 內邊距，內容顯示背景圖，邊框不顯示。
background-clip: content-box; 內容顯示內景圖，邊框和內邊距不顯示背景圖，即內邊距是透明的。或者是父元素的背景。
================================
border：20px solid transparent; 20px的實線邊框是透明的。
background: url('image/1.jpeg') no-repeat 10px 10px scroll;
background-clip: border-box; 邊框，內邊距，內容顯示背景圖 默認值。
background-clip: padding-box; 內邊距，內容顯示背景圖，邊框不顯示。
background-clip: content-box; 內容顯示內景圖，邊框和內邊距不顯示背景圖，即內邊距是透明的。或者是父元素的背景。
上面圖片background-postion:10px 10px; 水平和垂直位移相對於邊框盒子，內邊距盒子，內容盒子進行定位的：
background-origin: border-box; 圖片相對於邊框盒子進行定位
background-origin: padding-box; 圖片相對於內邊距盒子進行定位
background-origin: content-box; 圖片相對於內容盒子進行定位
-------------------
background-size:contain; 圖片遵循等比例縮放，直到整張圖片剛剛在整個div中就立馬停（圖片和div寬高總有一個相等），不是width留白，就是height高留白，也可能剛剛好覆蓋，而不留白。如果圖片很小，那么圖片的寬會放大到和div的寬一樣大，或者是放大圖片的高等於div的高。
background-size:cover; 圖片遵循等比例縮放，直到整張圖片剛剛好覆蓋整個div就立馬停（圖片和div寬高總有一個相等），不留白。不是width溢出，就是height溢出。不過也可能存在剛剛好覆蓋整個div不溢出。不是圖片的寬等於div的寬，就是圖片的高等於div的高。圖片基本上都存在溢出，但是也可能剛剛整張圖片通過縮放剛剛好覆蓋整個div。
background-size: 50%; 默認設置兩個值：width height。如只設置一個，默認height:auto; 圖片的高等比例縮放，並不等於50%，這里50%是相對復原度div的寬度進行計算。
background-size: 50% 50%; 這里的百分比是相對父元素div的 width 和 height 而言的。跟上面一個不相等。
background-size:100%; 等於background-size:100% auto; 這里的100%是相對父元素div本身寬度而設定的，即等於圖片原始寬度。高度也等於原始高度。
當只設置width一個值時，height的值為：auto。根據寬度等比例縮放，確保不變形。
background-size: 600px; 等於：background-size:600px auto; 這里圖片的高度是根據圖片大小等比例縮放的。
A、length，設置背景圖片的高和寬
B、cover，把背景圖片擴展至足夠大，以使背景圖片完全覆蓋區域
C、percentage，以父元素的百分比來設置圖像的寬度和高度
D、contain，把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域
----------------------------------
多張背景圖片一般是使用多張png圖片在前，其他圖片在后，多張圖片重合形成一個更好看的效果圖。
background-image: url("image/1.gif"),url('image/1.jpeg'); 前面一張圖片會覆蓋后面一張圖片
"image/1.gif" 小圖
image/1.jpeg 大圖
如下圖：
=============================================
background: -webkit-linear-gradient(#ff0,#f0f,#fff,pink);
background: -moz-linear-gradient(#ff0,#f0f,#fff,pink);
background: -o-linear-gradient(#ff0,#f0f,#fff,pink);
background: linear-gradient(#ff0,#f0f,#fff,pink);
從左到右漸變，左是開始 ， 右是結束。
begin 表示寫開始 ，從左到右，在-webkit-內核中寫 left.
end 表示寫結束， 從左到右，在-moz-內核中寫 right.
to end，從左到右，所以標准寫法應該是 to right. 這是標准寫法。
-----如下從左到右漸變-------
background: -webkit-linear-gradient(left,#ff0,#f0f,#fff,pink);
background: -moz-linear-gradient(right,#ff0,#f0f,#fff,pink);
background: -o-linear-gradient(right,#ff0,#f0f,#fff,pink);
background: linear-gradient(to right,#ff0,#f0f,#fff,pink);
begin-level 開始水平線 begin-vertical 開始垂直線 即：兩線交點就是漸變起點。（適用 -webkit- 內核瀏覽器）
end-level 結束水平線 begin-vertical 結束垂直線 即：兩線交點就是漸變終點（使用 -moz- 和 -o- 內核瀏覽器）
to end-level end-vertical 結束點（水平線和垂直線交點） 這是標准寫法。
---------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
margin: 0 auto;
}
.container{
width: 800px;
margin: 0 auto;
text-align: center;
}
.container>div{
width: 200px;
height: 200px;
/* background: #ff0; */
}
.one{
float: left;
}
.two{
margin: 0 auto;
display: inline-block;
}
.three{
float: right;
}
.one{
/*上到下漸變。默認從上到下，所以不用寫方向。直接寫顏色即可*/
background: -webkit-linear-gradient(red,yellow,#00f,blue,orange);
background: -moz-linear-gradient(red,yellow,#00f,blue,orange);
background: -o-linear-gradient(red,yellow,#00f,blue,orange);
background: linear-gradient(red,yellow,#00f,blue,orange);
}
.two{
/*左到右漸變。只有webkit瀏覽器是寫開始begin，其他都是寫結束end，標准：to end*/
/*begin/end-direction 開始/結束方向
webkit 寫 begin-direction
moz 和 o 瀏覽器都是寫 end-direction
標准寫法 to end-direction
*/
background: -webkit-linear-gradient(left,red,yellow,#00f,blue,orange);
background: -moz-linear-gradient(right,red,yellow,#00f,blue,orange);
background: -o-linear-gradient(right,red,yellow,#00f,blue,orange);
background: linear-gradient(to right,red,yellow,#00f,blue,orange);
}
.three{
/*左上角到右下角漸變*/
/*begin/end-level 起始/結束點
webkit 寫 begin-level 起始點
moz 和 o 瀏覽器都是寫 end-level 結束點
標准寫法 to end-level 結束點
*/
background: -webkit-linear-gradient(top left,red,yellow,#00f,blue,orange);
background: -moz-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
background: -o-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
background: linear-gradient(to bottom right,red,yellow,#00f,blue,orange);
}
</style>
</head>
<body>
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
=================以上是線性漸變實例，上到下，左到右，左上角到右下角======================
============================================================================
角度確定：十字架，上是0deg，順時針右90deg，下是180deg，左是270deg。
background: linear-gradient(111deg,red,yellow 20%,blue 50%,orange 85%,blue 8%);
/*第一個不寫百分比值：默認0%，最后一個不寫百分比值：默認100%，如果orange 百分比 小於等於 blue 百分比，漸變線85%之后全部藍色。如果最后一個blue 百分比 小於 100% 那么 blue 百分比之后的全部都是純blue，沒有漸變,如果語法錯誤，則恢復默認從上到下漸變。使用角度寫漸變不存在兼容性，所以可以使用這個代替所有線性漸變。*/
background: linear-gradient(111deg,rgba(255, 0, 0, 0),rgba(255,0,0,.3) 20%,rgba(255, 0, 0, 1) 80%);
/*Alpha透明度,取值0~1之間。其他語法一毛一樣*/
===========================
background: repeating-linear-gradient(90deg,red,yellow,blue);
重復漸變只在屬性前增加了：repeating。其他一毛一樣。
==============================================================
-webkit-內核瀏覽器使用角度漸變的規則：如圖上圖：X軸，Y軸
1，以X軸正半軸為起始點，逆時針旋轉，度數變大。
-moz-,-ms-,-o-內核瀏覽器使用角度漸變的規則：如圖下圖：X軸，Y軸
1，以Y軸正半軸為起始點，順時針旋轉，度數變大。
在寫代碼時，一定要把帶-webkit-內核的瀏覽器樣式寫在前面如下：
background: -webkit-linear-gradient(top left,red,yellow,#00f,blue,orange);
background: -moz-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
background: -o-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
background: linear-gradient(to bottom right,red,yellow,#00f,blue,orange);
==============================================================
好看的重復漸變：只添加了一個repeating，其他一毛一樣。
-webkit-background: repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);
-moz-background: repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);
-ms-background: repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);
-o-background: repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);
background: repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);
-webkit-background: repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
-moz-background: repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
-ms-background: repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
-o-background: repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
=================
.two{
/*默認徑向漸變*/
width: 300px;/*width != height時，circle圓形，ellipse橢圓*/
height: 600px;
margin: 0 auto;
margin-top: 100px;
/*默認div中心就是圓心，默認徑向漸變圖形為橢圓ellipse*/
background: -webkit-radial-gradient(red 20%,green 50%,blue 80%);
background: -moz-radial-gradient(red 20%,green 50%,blue 80%);
background: -ms-radial-gradient(red 20%,green 50%,blue 80%);
background: -o-radial-gradient(red 20%,green 50%,blue 80%);
background: -radial-gradient(red 20%,green 50%,blue 80%);
}
.one{
width: 300px;/*width=height*/
height: 300px;
margin: 0 auto;
margin-top: 100px;
/*width=height時，決定了是circle漸變，所以下面設置成ellipse都是沒用的。*/
background: -webkit-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
background: -moz-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
background: -ms-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
background: -o-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
background: -radial-gradient(ellipse,red 20%,green 50%,blue 80%);
}
.main{
width: 300px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
/*完整徑向漸變屬性如下：
20% 40% 設置圓心。
closest-side ellipse/circle 設置半徑為：距離圓心最近的邊,進行橢圓/正圓漸變。
closest-corner ellipse/circle 設置半徑為：距離圓心最近的角,進行橢圓/正圓漸變。
farthest-side ellipse/circle 設置半徑為：距離圓心最遠的邊,進行橢圓/正圓漸變。
farthest-conrner ellipse/circle 設置半徑為：距離圓心最遠的角,進行橢圓/正圓漸變。
漸變形狀兩個值：
circle 圓形
ellipse 橢圓
*/
background: -webkit-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
background: -moz-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
background: -ms-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
background: -o-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
background: -radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
}
.three{
width: 300px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
/*重復徑向漸變：repeating-radia-gradient*/
background: -webkit-repeating-radial-gradient(red 10%,green 20%);
background: -moz-repeating-radial-gradient(red 10%,green 20%);
background: -ms-repeating-radial-gradient(red 10%,green 20%);
background: -o-repeating-radial-gradient(red 10%,green 20%);
background: -repeating-radial-gradient(red 10%,green 20%);
}
HTML背景透明
opacity:0.5;/*這樣設置背景顏色為透明，那么里面的字體也會變成半透明*/
background:rgba(255,255,255,0.2);/*這樣只設置背景顏色，里面內容不是透明*/
background: transparent; 背景透明，且文字不透明
filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能設置position:static(默認屬性) ，否則會導致子元素繼承Alpha值 */
zoom:1; /* 激活IE6、7的haslayout屬性，讓它讀懂Alpha */
-webkit-
-moz-
-ms-
-o-