13. CSS背景

參考網站：https://www.w3schools.com/cssref/css3_pr_background.asp

codepen：https://codepen.io/pen/

一、背景顏色：background-color

1. 有效的顏色名稱 ：「red」
2. 16進制值：「#fff」
3. rgb值：「rgb(255,0,0)」
4. rgba值：「rgb(255,0,0.5)」：最後一個是透明度 0:完全透明 1:完全不透明
5. 例：

     background-color: red;
     background-color: #000;
     background-color: rgb(0,0,255);
     background-color: rgba(0,0,255,0.1);

二、背景圖：background-image

1. 例

   background-image: url("http://bootstrap.ugm.com.tw/img/bg/paper.gif");
   

2. 預設水平、垂直重覆

三、背景重複：background-repeat

1. 背景圖案不重複

    background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
    background-repeat: no-repeat;
   

2. 背景圖案在 x-方向重複

     background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
     background-repeat: repeat-x;
   

3. 背景圖案在 y-方向重複

     background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
     background-repeat: repeat-y;

4. 背景圖案在 x- 及 y-方向重複

     background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
     background-repeat: repeat;

    

四、背景位置：background-position

1. background-position 屬性是用來指定背景圖案的位置。它的值可以是：

2. 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
3. 兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。
4. 兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。

五、背景附件：background-attachment

1. background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。
2. 例：https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment

六、CSS3背景：https://www.w3schools.com/css/css3_backgrounds.asp

七、漸層的背景產生器：https://testdrive-archive.azurewebsites.net/graphics/cssgradientbackgroundmaker/