4-3 背景屬性
background 背景類屬性
| 屬性 | 說明 | CSS3 | 連結 |
|---|---|---|---|
| background | 背景類屬性合併的寫法，但CSS3新屬性部份不能合併 | 英 ／ 中 | |
| background-color | 背景顏色 | 英 ／ 中 | |
| background-image | 設計背景影像 | 英 ／ 中 | |
| background-repeat | 設計背景影像的重複方式 | 英 ／ 中 | |
| background-position | 設計背景影像的定位方式 | 英 ／ 中 | |
| background-attachment | 設計背景影像是否與頁面同時移動 | 英 ／ 中 | |
| background-size | 設計背景影像的寬高尺寸 | V | 英 ／ 中 |
簡要說明
background ( 複合屬性 )
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
說明：
- 如果速記聲明中的屬性之一是 bg-size 屬性，則必須使用 /（斜線）將其與 bg-position 屬性分開，例如 background:url(smiley.gif) 10px 20px/50px 50px ; 將生成一個背景圖像，位於距左側 10 像素、距頂部 20 像素的位置，並且圖像的大小將為 50 像素寬和 50 像素高。
- 使用多張背景圖像時，還想要一個背景顏色，則背景顏色參數需要在列表中的最後一個
- bg-size：若要使用auto、cover、contain(CSS3新屬性)，則不可與background屬性合併
background-repeat
| 屬性值 | 說明 |
|---|---|
| repeat預設值 | 背景圖像將向垂直和水平方向重複。 |
| repeat-x | 只有水平位置會重複背景圖片 |
| repeat-y | 僅垂直位置會重複背景圖片 |
| no-repeat | 不重複 |
| inherit | 指定背景-重複屬性設置應該從父元素繼承 |
background-position
屬性值單位：位置表示 ( top/right/bottom/left)、 % 、 px
background-attachment
範例| 屬性值 | 說明 |
|---|---|
| scroll 預設值 | 背景圖片隨著頁面的滾動而滾動。 |
| fixed | 背景圖片不會隨著頁面的滾動而滾動。 |
| local | 背景圖片會隨著元素內容的滾動而滾動。 |
| initial / inherit | 詳連結參考操作說明 |
background-size
background-size: length|percentage|cover|contain;
| 屬性值 | 說明 |
|---|---|
| 寬度長度 高度尺寸 | 單位：px 若只有一個值，則另一個設置為auto(依比例調整) |
| 寬度百分比 高度百分比 | 計算相對性元素的尺寸百分比。 若只有一個值，則另一個設置為auto(依比例調整) |
| cover | 背景圖片依比較調整，並填滿整個背景區域。 背景圖片部份區域可能會消失 建議與background-position結合 |
| contain | 背景圖片依比較調整，縮放至背景區域。 背景區域可能X或Y方向重覆背景圖片 經常與background-repeat結合 |
說明：bg-size：百分比討論
說明：bg-size：cover / contain 討論
