CSS 中的顏色和背景

PHPz

發布： 2024-09-01 20:32:47

原創

774 人瀏覽過

Colors and Backgrounds in CSS

第 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：

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of using colors and backgrounds in CSS.</p>
</div>

登入後複製

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;
}

登入後複製

在此範例中：