新！我的 44 頁電子書「44 分鐘學會 CSS」出爐了！😃

立即取得 →

#background-image

定義圖片為元素的背景。

預設值 background-image: none;

移除任何背景圖片。

background-image: url(/images/jt.png);

使用在 url 路徑中定義的圖片。此路徑可以是相對路徑（相對於 css 檔案）或絕對路徑（例如 https://cssreference.dev.org.tw/images/jt.png）。

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

您可以定義線性漸層作為背景圖片。

您需要定義至少兩種顏色。第一種顏色會從頂部開始，第二種顏色會從底部開始。

預設角度為 to bottom（或 180deg），表示漸層為垂直，從元素頂端開始，於元素底部結束。

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

您可以指定角度，以度數或關鍵字表示。

使用度數時，您指定漸層的方向或結束位置。因此，0deg 表示元素的頂端，就像時鐘上的 12:00。

在此範例中，45deg 表示 2:30，或右上角。

background-image: radial-gradient(green, purple);

您可以定義徑向漸層作為背景圖片。

您需要定義至少兩種顏色。第一種顏色會在中心，第二種顏色會在邊緣。

background-image: radial-gradient(circle, green, purple);

您可以指定徑向漸層的形狀：圓形或橢圓形（預設）。

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

您可以使用百分比值指定顏色停駐點。

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

您可以指定漸層的結束位置

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

與 background-position 相同，您可以指定漸層的位置。