你以為你懂 CSS 背景？再想想

作者：前端小智 2025-08-21 01:15:00

開發前端

無論是高清攝影、細膩漸變，還是可復用的紋理圖案，背景圖在網頁設計中都至關重要。這份指南將深入講解?CSS?background-image：它如何工作、如何高效使用，以及一些能讓你頁面出彩的進階技巧。

你是否曾打開一個網站，就被它驚艷的背景一眼拿下？

無論是高清攝影、細膩漸變，還是可復用的紋理圖案，背景圖在網頁設計中都至關重要。

這份指南將深入講解 CSS background-image：它如何工作、如何高效使用，以及一些能讓你頁面出彩的進階技巧。

讀完后，你就能像專業開發者一樣，自信地為元素應用與定制背景圖！

什么是 `background-image`？

background-image 是 CSS 中非常強大的樣式工具：它允許你為任意 HTML 元素設置圖片（或漸變）作為背景。

基本語法

selector {
  background-image: url('path-to-image.jpg');
}

url()：指定你的圖片路徑。
默認情況下，背景圖會從左上角開始繪制。
如果圖片小于元素大小，它會在水平與垂直方向重復鋪滿。

背景控制的關鍵屬性

background-image 常與其他背景相關屬性搭配，來精細控制顯示效果。逐個拆解如下。

1）`background-repeat` —— 是否重復？

默認情況下，背景圖會重復以填滿整個元素。你可以這樣控制：

selector {
  background-repeat: repeat;      /* 默認：在兩個方向都重復 */
  background-repeat: no-repeat;   /* 只顯示一次，不重復 */
  background-repeat: repeat-x;    /* 僅水平重復 */
  background-repeat: repeat-y;    /* 僅垂直重復 */
}

適用場景：

?? 大幅 Hero 背景圖：用 no-repeat。
?? 頂部紋理條（導航欄紋理）：用 repeat-x。

2）`background-size` —— 調整背景圖尺寸

定義背景圖如何在容器內縮放：

selector {
  background-size: auto;        /* 默認，原始尺寸 */
  background-size: cover;       /* 覆蓋整個元素（可能被裁切） */
  background-size: contain;     /* 完整顯示（不裁切，可能留空） */
  background-size: 50% 80%;     /* 自定義寬度與高度 */
}

cover：非常適合全屏背景。
contain：確保背景圖完整可見（適合 Logo 等）。

3）`background-position` —— 背景圖出現在哪里？

控制背景圖的起始位置：

selector {
  background-position: top left;   /* 默認左上 */
  background-position: center;     /* 居中 */
  background-position: 20% 50%;    /* 自定義 X/Y 位置 */
}

Hero 圖：用 center 居中展示主體。
右下角水印：用 right bottom。

4）`background-attachment` —— 固定還是隨滾動？

決定背景圖是隨頁面滾動還是固定在視口：

selector {
  background-attachment: scroll;  /* 默認：隨滾動移動 */
  background-attachment: fixed;   /* 固定不動（可做視差效果） */
}

小技巧：

fixed 能營造視差滾動（parallax）的效果，在現代設計中很常見。

進階技巧

漸變作為背景

你可以用 CSS 漸變替代圖片，獲得絲滑的顏色過渡：

selector {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

示例： 按鈕、標題區或極簡背景都很適合。

多重背景（疊加）

一個元素可以同時疊加多張背景圖/漸變：

selector {
  background-image:
    url('pattern.png'),
    linear-gradient(to bottom, #333, #000);
  background-repeat: repeat, no-repeat; /* 第一層平鋪，第二層不重復 */
}

常見坑 & 最佳實踐

1）優化圖片體積大圖會拖慢站點。用 TinyPNG 等工具先壓縮。

2）設置后備背景色圖片加載失敗時，至少還有一個背景色兜底：

selector {
  background-color: #f0f0f0;          /* 兜底顏色 */
  background-image: url('image.jpg'); /* 主背景圖 */
}

3）響應式適配不同屏幕要測試。用媒體查詢調整 background-size 等：

@media (max-width: 768px) {
  selector {
    background-size: contain; /* 小屏完整顯示 */
  }
}

實戰示例

示例 1：全屏 Hero 背景

.hero {
  background-image: url('hero-bg.jpg');
  background-size: cover;        /* 覆蓋屏幕 */
  background-position: center;   /* 居中主體 */
  background-repeat: no-repeat;  /* 不重復 */
  height: 100vh;                 /* 視口高度 */
}

示例 2：細膩紋理 + 漸變疊加

.header {
  background-image:
    url('subtle-pattern.png'),
    linear-gradient(to right, #4a6fa5, #166088);
  background-repeat: repeat, no-repeat; /* 紋理平鋪，漸變不重復 */
}

掌握 background-image 能為你的網站打開無窮創意：無論是照片、漸變還是圖案，CSS 都給了你足夠的控制力。

責任編輯：武曉燕來源：大遷世界

CSS 背景網頁