跳轉到

建立 2025-02-25 更新 2026-09-11

背景色、圖片與漸層（Background）

背景畫在 padding 盒上（預設），畫不到 margin。一層不夠時可以疊多個背景，第一張寫在最上面。

純色

body { background-color: #f4f6fb; }
.card { background: white; }

background 縮寫會重設 background-size 等子屬性，只改顏色時用 background-color 較安全。

background-image

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
屬性 常用值 說明
background-size cover、contain、200px auto cover 填滿但可能裁切；contain 完整顯示可能留邊
background-position center、right 10% bottom 錨點
background-repeat no-repeat、repeat-x 花紋才需要 repeat
background-attachment scroll、fixed fixed 做視差時在手機上可能卡頓
background-clip border-box、padding-box、text text 可做漸層字（需透明 fill）
background-origin 與 clip 類似，決定原點

縮寫（注意 position / size 的斜線）：

.hero {
  background:
    url("hero.jpg") center / cover no-repeat,
    linear-gradient(180deg, rgb(0 0 0 / 40%), rgb(0 0 0 / 10%));
  color: white;
}

漸層

漸層也是一種 background-image：

.banner {
  background-image: linear-gradient(135deg, #264de4, #7c4dff);
}

.dot {
  background-image: radial-gradient(circle at top, #fff 0, #ddd 70%);
}

.conic {
  background: conic-gradient(from 180deg, #264de4, #ff8a00, #264de4);
}

重複漸層適合做條紋：repeating-linear-gradient(...)。

多層背景

逗號分隔，先寫的在上面：

.hero {
  background-image:
    linear-gradient(rgb(0 0 0 / 35%), rgb(0 0 0 / 35%)),
    url("hero.jpg");
}

每層可以有自己的 size / position，縮寫時依層對應。

內容圖 vs 背景圖

<img> background-image
語意 / 無障礙 可寫 alt 純裝飾，不該承載資訊
裁切 object-fit: cover background-size: cover
SEO / 選取 是內容 不是

產品照、新聞圖用 <img>；花紋、英雄區裝飾可用背景。

.thumb img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  object-position: center;
}

總結

  • 裝飾用背景，有意義的圖用 <img> + object-fit。
  • cover 填滿、contain 完整；英雄區常再疊一層半透明漸層保證白字可讀。
  • 縮寫容易重設子屬性，維護期長的專案可拆開寫。

互動狀態接著看 偽類及偽元素。