CSS background-image: linear-gradient 屬性詳解：創建漸層背景的完美工具

更新日期： 2024 年 11 月 4 日

在網頁設計中，漸層背景不僅能增強視覺效果，還能讓頁面更具層次感。

CSS 提供的 linear-gradient 是一個強大的屬性，允許我們創建多種漸層效果而無需使用圖片。

透過 background-image: linear-gradient，我們可以輕鬆實現各種角度和顏色的漸層，為頁面增添更多的視覺吸引力。

linear-gradient 基本語法

linear-gradient 是 CSS 中的函數，用來生成線性漸層背景。

它被用作 background-image 的值，因此需要和 background-image 屬性一起使用。

基本語法如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction：漸層的方向，可以是角度（例如 45deg）或方位（例如 to right、to bottom）。
• color-stop1, color-stop2, ...：漸層中的顏色和停止點，可以有兩個或更多的顏色。

漸層方向

direction 是 linear-gradient 的第一個參數，用來定義漸層的方向。常見的方向有兩種表示方法：角度和方位。

使用角度

角度的單位為度數（deg），0度代表從上往下，順時針旋轉角度。例如：

background-image: linear-gradient(45deg, red, blue);

此例中，漸層從左側（0度）開始，朝著右側（45度）進行變化，從紅色漸變到藍色。

使用方位

除了角度外，我們也可以使用方位來設定方向。

例如 to right 代表從左向右，to bottom 代表從上到下：

background-image: linear-gradient(to right, red, blue);

這表示從左到右的漸層，從紅色漸變至藍色。常見的方位值包括：

• to right：從左到右
• to bottom：從上到下
• to top left：從右下角到左上角
• to bottom right：從左上角到右下角

漸層色彩的設置

linear-gradient 支持兩個或多個顏色漸變。每個顏色之間可以有平滑的過渡，也可以通過設定停止點（color-stop）來調整漸層的過渡位置。

基本的雙色漸層

最簡單的漸層是兩個顏色的過渡：

background-image: linear-gradient(to right, red, blue);

這會從左側開始顯示紅色，然後逐漸變為藍色，直到右側。

多色漸層

linear-gradient 可以接受多個顏色，這樣可以創造出更加豐富的漸層效果。例如：

background-image: linear-gradient(to right, red, yellow, green, blue);

這裡，背景會從紅色漸變到黃色，再逐漸過渡到綠色，最後變為藍色。

設定停止點（Color Stop）

我們可以在每個顏色之後加上百分比或絕對單位，設定顏色的停止位置。

例如：

background-image: linear-gradient(to right, red 20%, yellow 50%, blue 80%);

這裡，漸層會從左側開始，第一個顏色紅色佔 20%，接著從 20% 到 50% 之間逐漸變為黃色，最後從 50% 到 80% 漸變成藍色並維持到結尾。

實現不透明度的漸層

在 linear-gradient 中，我們可以透過 RGBA 或 HSLA 顏色格式來控制顏色的不透明度。例如：

background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));

這段代碼會創建一個從紅色半透明到藍色半透明的漸層背景。這種透明效果可以疊加在其他內容上，產生多層次的背景效果。

多重漸層

我們還可以將多個漸層疊加在一起，創造出更複雜的效果。只需將多個 linear-gradient 用逗號分隔：

background-image: linear-gradient(to right, red, yellow), linear-gradient(to bottom, blue, green);
background-blend-mode: multiply;

這樣，第一個漸層從左到右變化，而第二個漸層則從上到下，兩個漸層會相互重疊，形成更具視覺吸引力的背景效果。

要實現多重漸層疊加效果，可以調整 background-blend-mode 來達到預期效果。

這樣可以讓每一層漸層都顯示出來並融合。

linear-gradient 的應用範例

1. 按鈕背景：使用漸層背景可以讓按鈕更具視覺吸引力，例如從亮色到暗色的漸層增強按鈕的立體感。
2. 卡片背景：漸層背景適合用於卡片式佈局的背景，可以為卡片增添色彩，提升設計的質感。
3. 標題區塊：使用 linear-gradient 作為標題區塊背景，結合透明度疊加效果，能強化文字的對比度並增強視覺吸引力。

結論

background-image: linear-gradient 是一個非常實用的 CSS 屬性，能夠創建豐富的線性漸層效果，替代了傳統的圖片漸層背景，讓網頁更加高效且具有視覺吸引力。

透過不同的漸層方向、多色組合以及透明度設定，我們可以靈活地打造符合設計需求的背景效果。

靈活運用 linear-gradient，能為您的網頁設計增色不少。