如何使用CSS建立線性漸層背景？-css教學-PHP中文網

CSS中的線性漸層屬性

使用CSS建立線性漸變背景

步驟

第一步：定義梯度

第 2 步：將漸層應用於元素

第三步：自訂漸層

Example 3

範例 3

Creating linear gradient background using CSS

結論

首頁

web前端

css教學

如何使用CSS建立線性漸層背景？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 28, 2023 pm 11:57 PM

如何使用CSS建立線性漸層背景？

在CSS中，線性漸層背景是一種設計技術，用於在單一元素中建立兩種或多種顏色之間的平滑過渡。它是使用CSS的background-image屬性和lineargradient()函數來定義的。

CSS中的線性漸層屬性

to - 它指定漸層的方向
color-stops − 它指定了漸層中使用的顏色及其位置。
repeating-linear-gradient - 建立重複漸變，其中漸變圖案水平或垂直重複。
background-size − 它指定了漸層背景的大小。
background-clip − 它指定了漸層背景應該覆寫的元素區域。
background-origin - 它指定漸層背景的原點。
background-attachment - 它指定漸層背景是否應該固定或與頁面的其餘部分一起滾動。
background-position - 它指定漸層背景在元素內的位置。

使用CSS建立線性漸變背景

線性漸層是網頁設計中流行的背景效果，因為它可以為任何元素添加深度和紋理。使用 CSS 即可輕鬆完成，無需圖片或複雜的設計軟體。在本文中，我們將探討如何使用 CSS 建立線性漸層背景。

步驟

透過以下步驟，我們可以輕鬆地在 HTML 和 CSS 中建立線性漸層背景。

第一步：定義梯度

在這一步驟中我們定義漸層。為了建立線性漸變，我們使用 CSS background 屬性和 linear-gradient() 函數。

第 2 步：將漸層應用於元素

定義了漸層之後，我們將其應用於HTML元素。

第三步：自訂漸層

漸層可以輕鬆地根據設計需求進行自訂。我們可以透過更改 to 關鍵字的值來改變漸層的方向。

Example 1

的中文翻譯為：

範例 1

在這個範例中，漸層效果會套用在HTML文件頭部的CSS樣式區塊中的body元素。

<html>
   <head>
      <title>Example to create linear gradient background using CSS</title>
      <style>
         body {
            background: linear-gradient(to right, #ff0000, #ffff00);
         }
      </style>
   </head>
   <body>
      <h2 id="Creating-linear-gradient-background-using-CSS">Creating linear gradient background using CSS </h2>
      <p>This is a sample HTML document with a linear gradient background.</p>
   </body>
</html>

登入後複製

在上面的例子中，使用CSS的linear-gradient函數創建了一個從紅色（#ff0000）到黃色（#ffff00）的漸變，從左到右（to right）。漸層應用於HTML文件的頭部部分中的CSS樣式區塊中的body元素。

範例 2

在這個範例中，漸層效果將應用於 .container 元素，並且將作為文字內容的容器。

<html>
   <head>
      <title>Example to create linear gradient background using CSS</title>
      <style>
         body{
            text-align:center;
         }
         .container {
            height: 200px;
            background: linear-gradient(to bottom, #ff0000, #ffff00);
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h2 id="Creating-linear-gradient-background-using-CSS">Creating linear gradient background using CSS </h2>
         <p>This is a sample HTML document with a linear gradient background.</p>
      </div>
   </body>
</html>

登入後複製

在上面的範例中，建立了一個名為 .container 的 CSS 類，並將其應用於 HTML 正文中的 div 元素。 CSS 線性漸變函數用於建立從紅色（#ff0000）開始到黃色（#ffff00）從上到下（到底部）的漸變。

Example 3

的中文翻譯為：

範例 3

在這個範例中，漸層效果將會套用到 .header 元素

<html>
   <head>
      <title>Example to create linear gradient background using CSS</title>
      <style>
         .header {
            height: 50px;
            background: linear-gradient(45deg, #ff0000, #ffff00);
         }
      </style>
   </head>
   <body>
      <div class="header"></div>
      <h2 id="Creating-linear-gradient-background-using-CSS">Creating linear gradient background using CSS </h2>
      <p>This is a sample HTML document with a linear gradient background.</p>
   </body>
</html>

登入後複製

在上面的範例中，建立了一個名為.header的CSS類，並將其應用於HTML body中的一個div元素。使用CSS的linear-gradient函數建立一個從紅色(#ff0000)漸變到黃色(#ffff00)的漸變，以45度的角度(45deg)開始。此漸層應用於高度為100像素的.header元素，作為頁面的頁首部分。