網頁設計好好玩(10502)
參考網站：https://www.w3schools.com/cssref/css3_pr_background.asp
codepen：https://codepen.io/pen/
一、背景顏色：background-color
- 有效的顏色名稱 ：「red」
- 16進制值：「#fff」
- rgb值：「rgb(255,0,0)」
- rgba值：「rgb(255,0,0.5)」：最後一個是透明度 0:完全透明 1:完全不透明
- 例： background-color: red; background-color: #000; background-color: rgb(0,0,255); background-color: rgba(0,0,255,0.1);
二、背景圖：background-image
- 例 background-image: url("http://bootstrap.ugm.com.tw/img/bg/paper.gif");
- 預設水平、垂直重覆
三、背景重複：background-repeat
- 背景圖案不重複 background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif); background-repeat: no-repeat;
- 背景圖案在 x-方向重複 background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif); background-repeat: repeat-x;
- 背景圖案在 y-方向重複 background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif); background-repeat: repeat-y;
- 背景圖案在 x- 及 y-方向重複
background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
background-repeat: repeat;
四、背景位置：background-position
-
background-position 屬性是用來指定背景圖案的位置。它的值可以是：
- 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
- 兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。
- 兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。
五、背景附件：background-attachment
- background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。
- 例：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/