CSS 背景 (Background)

CSS 提供多個屬性來控制元素的背景，包括背景顏色、背景圖片、位置、大小等。

background-color（背景顏色）

設定元素的背景顏色。

.box {
  background-color: #f0f0f0;
}

.transparent {
  background-color: transparent;    /* 透明（預設） */
}

.semi-transparent {
  background-color: rgba(0, 0, 0, 0.5);  /* 半透明黑色 */
}

background-image（背景圖片）

設定元素的背景圖片。

.hero {
  background-image: url('image.jpg');
}

/* 多個背景圖片（後面的在下層） */
.multiple {
  background-image: url('top.png'), url('bottom.jpg');
}

background-repeat（背景重複）

設定背景圖片是否重複以及如何重複。

.repeat {
  background-repeat: repeat;      /* 水平和垂直都重複（預設） */
}

.no-repeat {
  background-repeat: no-repeat;   /* 不重複 */
}

.repeat-x {
  background-repeat: repeat-x;    /* 只水平重複 */
}

.repeat-y {
  background-repeat: repeat-y;    /* 只垂直重複 */
}

.space {
  background-repeat: space;       /* 平均分布，不裁切 */
}

.round {
  background-repeat: round;       /* 縮放以填滿，不裁切 */
}

background-position（背景位置）

設定背景圖片的位置。

.center {
  background-position: center;           /* 置中 */
}

.top-left {
  background-position: top left;         /* 左上 */
}

.bottom-right {
  background-position: bottom right;     /* 右下 */
}

/* 使用數值 */
.custom {
  background-position: 50px 100px;       /* 從左上角偏移 */
}

/* 使用百分比 */
.percent {
  background-position: 50% 50%;          /* 置中 */
}

/* 從特定邊偏移 */
.offset {
  background-position: right 20px bottom 10px;
}

background-size（背景大小）

設定背景圖片的大小。

/* 自動（預設） */
.auto {
  background-size: auto;
}

/* 覆蓋整個容器（可能裁切） */
.cover {
  background-size: cover;
}

/* 完整顯示圖片（可能有空白） */
.contain {
  background-size: contain;
}

/* 指定大小 */
.fixed {
  background-size: 200px 100px;
}

/* 百分比 */
.percent {
  background-size: 100% auto;
}

cover vs contain

cover：圖片放大到完全覆蓋容器，可能會裁切
contain：圖片縮放到完全顯示，可能會有空白

background-attachment（背景固定）

設定背景圖片是否隨頁面捲動。

.scroll {
  background-attachment: scroll;   /* 隨元素捲動（預設） */
}

.fixed {
  background-attachment: fixed;    /* 固定在視窗，不隨捲動 */
}

.local {
  background-attachment: local;    /* 隨內容捲動 */
}

fixed 常用於製作視差滾動 (parallax) 效果。

background-origin（背景起始位置）

設定背景圖片的定位參考區域。

.padding-box {
  background-origin: padding-box;   /* 從 padding 區域開始（預設） */
}

.border-box {
  background-origin: border-box;    /* 從 border 區域開始 */
}

.content-box {
  background-origin: content-box;   /* 從 content 區域開始 */
}

background-clip（背景裁切）

設定背景的繪製區域。

.border-box {
  background-clip: border-box;     /* 延伸到 border（預設） */
}

.padding-box {
  background-clip: padding-box;    /* 只到 padding */
}

.content-box {
  background-clip: content-box;    /* 只到 content */
}

.text {
  background-clip: text;           /* 只顯示在文字上 */
  -webkit-background-clip: text;
  color: transparent;
}

background（縮寫屬性）

background 是一個縮寫屬性，可以一次設定多個背景屬性。

.hero {
  background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}

/* 等同於 */
.hero {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

縮寫順序（都是可選的）： background: color image repeat attachment position/size

實用範例

滿版背景圖

.hero {
  background: url('hero.jpg') no-repeat center/cover;
  height: 100vh;
}

漸層背景

.gradient {
  background: linear-gradient(to right, #667eea, #764ba2);
}

半透明覆蓋層

.overlay {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('image.jpg') center/cover;
}

重複圖案背景

.pattern {
  background: url('pattern.png') repeat;
  background-size: 50px 50px;
}