大家好，我是一名菜鳥工程師，Chris，今天來到第 11 天，CSS 變數以及背景圖片的使用

CSS 變數 : 也稱為自定義屬性，可以自己定義和使用變數

- 定義和使用變數
1 定義 CSS 變數：
用 -- 來定義 CSS 變數，然後再給它自己設定的值，通常會定義在 :root 下，這樣就能在 HTML 的任何地方使用它

:root{
  --main-blue-color: #007bff;
  --font-size: 16px;
}

我定義兩個變數，分別是 --main-blue-color 和 --font-size，用於網頁的主要顏色和字體大小

2 使用 CSS 變數：
用 var() 函數，並將變數名稱作為參數傳遞給它

.box {
  background-color: var(--main-blue-color);
  font-size: var(--font-size);
  width: 200px;
  height: 200px;
}

我使用 var(--main-blue-color) 和 var(--font-size) 分別設置背景顏色和字體大小

- 背景圖片
可以使用 background-image 屬性來設定

1 首先，先在 HTML 文件建立一個元素

<div class="bg-image"></div>

2 增加 CSS 樣式
使用 CSS 選擇器，來設定背景圖片的元素，接著使用 background-image 屬性來設置背景圖片，這邊使用 url() 函數，來指定圖片的 URL

.bg-image {
  width: 300px;
  height: 200px;
  background-image: url("my-image.jpg");
}

3 背景圖片的其他屬性
以下還有與背景相關的 CSS 屬性，可以自訂樣式來設計網站

- background-repeat： 圖片是否重複。像是 repeat(默認值，橫向和縱向重複)、no-repeat(不重複)、repeat-x(僅橫向重複)或 repeat-y(僅縱向重複)
- background-size： 背景圖片的大小。像是 cover（填滿整個元素）或 contain（保持圖片完整並進行縮放）
- background-position： 指定背景圖片的位置。可以使用像素、百分比或關鍵字（如 center、top、bottom 等）
- background-color： 如果圖片未填滿整個元素，可以指定背景圖片周圍的背景顏色

綜合以上的用法說明，背景圖片的 CSS 範例：

.bg-image {
  width: 500px;
  height: 300px;
  background-image: url("my-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: #f0f0f0;
}

背景圖片的合併寫法：

background: background-color background-image background-repeat background-attachment background-position;

那我們明天見囉～～

預告：明天會進入 JavaScript 的主題!!!