在前端優化的這部分，有一個就是css樣式能簡寫的儘量簡寫，而不是一個一個的進行書寫。有時候也是爲了方便吧，會使用簡寫的方式進行書寫，但前三個還可以 寫着寫着到後面就不知道順序了。
css中背景這個應用的還是很廣泛的，banner圖片 我們可以搞成背景，各種圖標 我們也可以放到一個 i元素的背景中 背景圖大小的調整 等等，
寫着經常忘詞，把我氣的也不輕哈哈，然後就開始面向百度編程，今天就來聊一聊css中的背景相關知識點。
我先單寫 分別進行 介紹 最後在合在一起簡寫
1.首先 先說 使用率最高的一個背景樣式
設置背景顏色
background-color:#f00; // 設置背景顏色 紅色
2.背景圖片
background-image:url(image/demo.png);
3.背景圖片的平鋪
background-repeat:
取值 1.repeat 默認值 平鋪
2.no-repeat 不平鋪
3.repeat-x 水平平鋪
4.repeat-y 垂直平鋪
4.背景圖片的定位
background-position:
取值 1.x y 以px爲單位的數字，定義x軸和y軸的位置
2.x% y%
3.x 或者 x%,不寫y，默認y爲50%
4.關鍵字 x：left/center/right y:top/center/bottom
5.設置背景圖片尺寸
background-size:
取值：1.x y 以px爲單位的數字
2.x% y%
3.只取一個值，同時設置寬高
4.cover 要求圖片把容器全部覆蓋，圖片會顯示不完整
5.contain 要求容器包含完整的圖片，圖片顯示完整，
但是容器會有空白區域
6.背景圖片的固定
background-attachment:
取值：1.scroll 默認值，背景圖定位以容器爲準
背景圖會隨着頁面滾動條滾動而變化
2. fixed 固定，背景圖定位以body爲準
頁面的滾動條，滾動，背景圖不會隨着發生位置變化
但是，只能在本容器區域內顯示
7.背景的簡寫方式
background:color image repeat attachment position;
最簡方式 background:color/image;
background:#f00;
background:url(demo.png);
簡寫舉例子 （一般是 背景圖片和顏色 選一個就行了 ）
body{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
注意：如果想在已有的背景設置中，添加或修改屬性
像什麼 background-size 這個不在簡寫方式中 單獨拿出來進行書寫
不能使用簡寫方式修改，不然會覆蓋之前的樣式，這裏注意哦 下面舉個例子
background-color:#f00;
backgrround-image:url(demmo.png');
//假設 上面是之前寫的 然後下面 我用 background進行改寫
background:#00f; 可能就把之前的重置 覆蓋掉
8.漸變色 css3 新增 gradient
8.1.什麼是漸變
漸變，就是指多種顏色，平緩變化一種顯示效果
8.2.漸變的主要因素
色標：一種顏色，及其出現的位置
一個漸變，至少有兩個色標
8.3.漸變的分類
①線性漸變 以直線的方式來填充漸變色
②徑向漸變 以圓形的方式來填充漸變色
③重複漸變 將線性漸變，或者徑向漸變，重複幾次實現填充
8.4.線性漸變
background-image
background-image:linear-gradient(方向,色標1,色標2,........);
方向：取值 1. to top ↑
to right →
to bottom ↓
to left ←
2.角度 0deg == to top
90deg== to right
180deg== to bottom
270deg== to left
色標： 顏色 位置
位置的寫法 1. #f00 10px px爲單位的數字
2. #f00 10% %
3.只有兩種顏色，分別在0%和100%，可以省略位置
舉例子
div{
height: 200px;
background-image:linear-gradient(to bottom,#f00,#00f);
}
8.5.徑向漸變
background-image:radial-gradient(半徑 at 圓心,色標1..........);
半徑：以px爲單位的數字
圓心：x y 以px爲單位的數字
x% y%
關鍵字 x:left/center/right y:top/center/bottom
關於色標，注意，如果色標的位置，使用px爲單位的具體數字。
那麼這個徑向漸變的半徑，就失去作用了
舉例子
div{
height: 200px;
background-image:radial-gradient(100px at 100px 100px ,#ff0,#0ff);
}
8.6.重複漸變
瞭解 相當於 把上面的給 那個啥 哈
重複的線性漸變
background-image:repeating-linear-gradient(方向,色標.....);
重複的徑向漸變
background-image:repeating-radial-gradient(半徑 at 圓心,色標.....);
好了 小編 繼續搬磚碼代碼 希望能幫到和小編一樣處於迷惑的前端小白們