background屬性：color:yellow/#00ff00/rgb(0,0,0)使用的背景顏色;position:背景圖像的起始位置：值top、left、right、bottom排列組合，默認值center/x%（水平位置） y%（垂直位置） 默認值：50%/0px(水平位置) 0px(垂直位置) 默認值50%;size:背景圖像的尺寸;repeat:如何重複背景圖像x/y/no;origin:相對於內容框定位，值：padding-box/border-box(邊框盒)/content-box內容框;clip:規定背景的繪製區域，border-box背景被裁剪到邊框盒/padding-box/content-box;attachment:scroll/fixed背景圖像是否固定或者隨着其餘頁面滾動;image:url(h1.jpg);
1、定義漸變背景
語法：background:gradient(direction,color1,color2,……)
background:-webkit-gradient(linear,left top,left bottom,from(#00adee),to(#0078a5));
background:-moz-linear-gradient(top,#00adee,#0078a5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');
知識點：-webkit——safari、chorme瀏覽器私有屬性，-moz——firefox瀏覽器私有屬性，-ms——IE瀏覽器私有屬性
linear：線性漸變，使用角度確定漸變方向，background:linear-gradient(angle,color1,color2)角度是指水平線和漸變方向之間的角度，
radial：徑向(放射性)漸變
left top,left bottom：漸變方向從左上角到左下角
#00adee,#0078a5漸變顏色由#00adee到#0078a5；也可以使用rgba(0,0,0,.2):red,green,blue,alphal透明度
text-ahadow:0 1px 2px rgba(0,0,0,.3);必需，水平陰影的位置，距離原字的距離往右；必需，垂直陰影，距離原字的距離往下；可選，模糊的距離，越大模糊所佔距離越大但是顏色越淺；可選，陰影的顏色
2、高度自適應背景圖像-滑動門（背景圖自適應文字長度）
例如：<div class="left"><div class="rigth">我的主頁</div></div>
.left{padding-left:14px;background:url(left.jpg) no-repeat left;}/*padding-left的值與left.jpg的width相等*/
.right{background:url(right.jpg) no-repeat right;padding-right:15px;}padding-rigth的值根據需求隨意，no-repeat後面的rigth指圖片從右邊開始重複。
如下圖詳解：
3、圖像定位之百分比定位
background-position:100%，100%，位置確定爲背景圖像的定位點即（x%,y%）處與容器定位點（x%,y%）處重合。
如果用em和px來定位則屬於精確定位，定位點始終是背景圖像的左上頂點。
4、定義固定背景
background-attachment:fixed|local|scroll
fixed:背景圖像相對於瀏覽器窗口固定，不隨滾動條而滾動；local：背景圖像相對於元素固定，元素內容滾動時他不滾動；scroll:背景圖像相對於元素內容固定，隨元素內容滾動而滾動