CSS 背景

背景色：

 background-color: red; -> 英文

      ＃00ff00; -> 十六進制 or #0f0;(縮寫)

      rgba(225, 0 , 0, .5) -> rgb代碼
                       ｜->不透明度

背景圖：

 background-image: url(".......");

背景圖重複：

 background-repeat: no-repeat;  => 圖片不重複
                    repeat;     => 圖片全面覆蓋
                    repeat-x;   => 重複x軸
                    repeat-y;   => 重複y軸

背景圖定位：

 background-position: ～％  ～％;  => 百分比數值
                      ～px  ～px;  =>  長度值(x, y)

                      top        left;
                      center  +  center; => 關鍵字
                      bottom     right;

背景圖是否會跟著內文滾動：

 background-attachment: scoll; => 默認值, 會跟著內容轉動
                        fixed; =>

速寫屬性：

 background: ＃0f0  url("XXX.png")  no-repeat  right top;
               |          |            |           |
              color      img         repeat     position

線性漸變：

要創建線性漸變，至少定義兩個顏色停止點。顏色停止是您要渲染平滑過渡的顏色。還可設置起始點和方向（或角度）以及漸變效果。

 background: linear-gradient(to bottom,  blue,  white); 
                                (方向)  (開始顏色) (過度顏色)

起始点渐变对角线式

 background: linear-gradient(to bottom right, blue, white);

指定一个角度

 background: linear-gradient(70deg, black, white);

多色漸變

 background: linear-gradient(to right, red, orange, yellow, green, blue);

背景圖的大小：

 background-size: ～px ～px; =>  高＆寬(只設定一個另一個會變'auto')
                  ～％ ～％;  =>  高＆寬
                  cover;    =>  背景圖擴到最大, 部分無法顯示。
                  contain;  =>  擴大最大尺寸, 寬高適應內容區域。