CSS入門-Day4：顏色與背景

浴火重生的雞

更新於 2024/08/07發佈於 2024/08/07閱讀時間約 7 分鐘

顏色屬性

顏色（color）

設置文本的顏色，可以使用多種表示法，包括顏色名稱、十六進制、RGB、RGBA、HSL 和 HSLA。

顏色名稱：
```
p {
  color: red;
}
```
十六進制：
```
p {
  color: #ff0000;
}
```
RGB：
```
p {
  color: rgb(255, 0, 0);
}
```
RGBA（含透明度）：
```
p {
  color: rgba(255, 0, 0, 0.5);
}
```
HSL：
```
p {
  color: hsl(0, 100%, 50%);
}
```
HSLA（含透明度）：
```
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

背景屬性

背景顏色（background-color）

設置元素的背景顏色，可以使用與文本顏色相同的表示法。

div {
  background-color: lightblue;
}

背景圖片（background-image）

設置元素的背景圖片。

div {
  background-image: url('background.jpg');
}

背景重複（background-repeat）

設置背景圖片的重複方式。

不重複：

div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

水平方向重複：

div {
  background-image: url('background.jpg');
  background-repeat: repeat-x;
}

垂直方向重複：

div {
  background-image: url('background.jpg');
  background-repeat: repeat-y;
}

全方向重複：

div {
  background-image: url('background.jpg');
  background-repeat: repeat;
}

背景位置（background-position）

設置背景圖片的位置。

div {
  background-image: url('background.jpg');
  background-position: center center;
}

背景尺寸（background-size）

設置背景圖片的大小。

覆蓋整個元素：

div {
  background-image: url('background.jpg');
  background-size: cover;
}

包含在元素中：

div {
  background-image: url('background.jpg');
  background-size: contain;
}

自定義大小：

div {
  background-image: url('background.jpg');
  background-size: 100px 200px;
}

漸變

漸變是一種顏色的逐漸變化效果。CSS 支持線性漸變和徑向漸變。

線性漸變（linear-gradient）

線性漸變從一個方向逐漸變化到另一個方向。

簡單線性漸變：

div {
  background: linear-gradient(to right, red, yellow);
}

多個顏色的線性漸變：

div {
  background: linear-gradient(to bottom, red, blue, green);
}

指定顏色位置：

div {
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

徑向漸變（radial-gradient）

徑向漸變從中心點向外逐漸變化。

簡單徑向漸變：

div {
  background: radial-gradient(circle, red, yellow);
}

多個顏色的徑向漸變：

div {
  background: radial-gradient(circle, red, blue, green);
}

指定顏色位置：

div {
  background: radial-gradient(circle, red 0%, yellow 50%, green 100%);
}

完整示例

這裡是一個完整的示例，展示如何使用顏色和背景屬性以及漸變。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 顏色與背景示例</title>
  <style>
    body {
      background-color: #f0f0f0;
      color: #333;
    }
    .example1 {
      background-color: lightblue;
      padding: 20px;
      margin-bottom: 20px;
    }
    .example2 {
      background-image: url('background.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      padding: 20px;
      margin-bottom: 20px;
      color: white;
    }
    .example3 {
      background: linear-gradient(to right, red, yellow);
      padding: 20px;
      margin-bottom: 20px;
      color: white;
    }
    .example4 {
      background: radial-gradient(circle, red, yellow);
      padding: 20px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="example1">這是一個背景顏色示例。</div>
  <div class="example2">這是一個背景圖片示例。</div>
  <div class="example3">這是一個線性漸變示例。</div>
  <div class="example4">這是一個徑向漸變示例。</div>
</body>
</html>