育將電腦工作室 - 線上書籍

網頁設計好好玩(10502)
==============

參考網站：[https://www.w3schools.com/cssref/css3\_pr\_background.asp](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. 例： ```
  <pre class="brush:as3;">
    background-color: red;
    background-color: #000;
    background-color: rgb(0,0,255);
    background-color: rgba(0,0,255,0.1);
  ```
 
二、背景圖：background-image

1. 例 ```
  <pre class="brush:as3;">
  background-image: url("http://bootstrap.ugm.com.tw/img/bg/paper.gif");
  ```
2. 預設水平、垂直重覆
 
三、背景重複：background-repeat

1. 背景圖案不重複 ```
  <pre class="brush:as3;">
   background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
   background-repeat: no-repeat;
  ```
2. 背景圖案在 x-方向重複 ```
  <pre class="brush:as3;">
    background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
    background-repeat: repeat-x;
  ```
3. 背景圖案在 y-方向重複 ```
  <pre class="brush:as3;">
    background-image:url(http://bootstrap.ugm.com.tw/img/bg/paper.gif);
    background-repeat: repeat-y;
  ```
4. 背景圖案在 x- 及 y-方向重複 ```
  <pre class="brush:as3;">
    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](https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment)
 
六、CSS3背景：[https://www.w3schools.com/css/css3\_backgrounds.asp](https://www.w3schools.com/css/css3_backgrounds.asp)

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

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown