我們可以設置元素的背景顏色、圖片、漸變等效果來美化網頁元素的背景，所以這篇來介紹怎麼調整喜歡的背景顏色來使網頁更加吸引人吧!

背景顏色

使用background-color屬性來設定元素的背景顏色，他跟color屬性一樣可以接各種顏色單位，包括命名顏色（red）、十六進制顏色（#FF0000）和RGB值（rgb(255, 0, 0)）都行。

/* 命名顏色 */
div {
  background-color: red;
}

/* 十六進制顏色 */
p {
  background-color: #00FF00;
}

/* RGB值 */
span {
  background-color: rgb(0, 0, 255);
}

透明背景

若要有玻璃的通透感可以使用rgba函數，相比rgb函數多了一個可調整透明度的a通道，範圍從0（完全透明）到1（完全不透明）。

/* 半透明紅色背景 */
div {
  background-color: rgba(255, 0, 0, 0.5); 
}

背景圖片

使用background-image屬性將背景圖片添加到元素，提供圖片的URL或是相對路徑、絕對路徑。

/* 添加背景圖片 */
header {
  background-image: url('https://i.imgur.com/eNosu2R.jpeg');
}

背景圖片選項

• background-repeat（重複）
• background-size（大小）
• background-position（位置）

可以控制背景圖片的狀態。

/* 背景圖片選項 */
section {
  background-image: url('https://i.imgur.com/eNosu2R.jpeg');
    
  /* 不重複 */
  background-repeat: no-repeat; 
  /* 覆蓋整個元素 */
  background-size: cover; 
  /* 居中對齊 */
  background-position: center; 
}

漸變背景

使用linear-gradient或radial-gradient函數來實現漸層變色的效果。

/* 線性漸變背景 */
button {
  background-image: linear-gradient(to right, red, yellow);
}

/* 徑向漸變背景 */
footer {
  background-image: radial-gradient(circle, green, blue);
}

今天介紹到這邊，感謝觀看!