第 3 講：CSS 中的顏色與背景

在本次講座中，我們將探討如何使用顏色和背景使您的網站具有視覺吸引力。了解如何有效地應用顏色和背景是創建引人入勝且美觀的網頁設計的關鍵。

在 CSS 中使用顏色

CSS 讓您以多種方式指定顏色，包括使用顏色名稱、十六進位值、RGB、RGBA、HSL 和 HSLA。

1.顏色名稱

CSS 提供了多種預先定義的顏色名稱。

• 例子：

  h1 {
    color: red;
  }

這會將所有

元素的文字顏色設為紅色。

2.十六進位顏色

十六進位代碼是數字和字母的六位組合，由紅色、綠色和藍色 (RGB) 值的組合定義。

• 例子：

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB 與 RGBA

RGB 代表紅、綠、藍。 RGBA 新增了一個 Alpha 通道以實現不透明度。

• 範例（RGB）：

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• 範例（RGBA）：

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL 與 HSLA

HSL 代表色相、飽和度和亮度。 HSLA 包括一個 Alpha 通道。

• 範例（HSL）：

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• 範例（HSLA）：

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

應用背景

CSS 中的背景可以透過向元素添加顏色、圖像、漸變等來增強設計。

1.背景顏色

您可以使用background-color屬性來設定任何HTML元素的背景顏色。

• 例子：

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2.背景圖片

CSS 讓您可以使用圖像作為背景。

• 例子：

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

這將在具有類別橫幅的元素上設定背景圖像。影像將覆蓋整個區域並居中。

3.背景重複

控制背景影像是否水平重複、垂直重複或完全不重複。

• 例子：

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4.背景位置

您可以控制背景圖片的起始位置。

• 例子：

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5.背景漸變

漸層可讓您在兩種或多種顏色之間建立平滑過渡。

• 範例（線性漸變）：

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• 範例（徑向漸層）：

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

實際範例：

讓我們透過一個使用顏色、背景圖像和漸變的範例將這些概念付諸實踐。

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

在此範例中：

• 主體背景色為淺灰色。

• 文字為深藍色。

• .content div 的背景圖像帶有深色漸層疊加層，使白色文字脫穎而出。

• 文本是淺色以補充背景。

練習

1. 建立一個包含標題、段落和 div 的網頁。
2. 嘗試使用不同的顏色格式（十六進位、RGB、HSL）來設計文字和背景樣式。
3. 將背景影像套用到某個部分並調整其位置、大小和重複屬性。
4. 建立具有線性或徑向漸層背景的部分。

下一步： 在下一講中，我們將介紹CSS 中的排版和字體樣式，您將在其中學習如何選擇和自定義字體以增強網站的可讀性並上訴。到時見！