CSS background 屬性
示例
在一行宣告中設定不同的背景屬性
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
自己動手試一試 »
定義和用法
background 屬性是以下屬性的簡寫屬性：
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
即使缺少上面的一些值也是允許的，例如：background:#ff0000 url(smiley.gif); 是允許的。
| 預設值 | 檢視單個屬性 |
|---|---|
| 繼承 | no |
| 可動畫 | 是的，檢視單個屬性。 閱讀關於可動畫屬性 Try it |
| 版本 | CSS1 + CSS3 中的新屬性 |
| JavaScript 語法 | object.style.background="red url(smiley.gif) top left no-repeat" Try it |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注意：請參閱下方各個值的瀏覽器支援情況。
CSS 語法
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 畫素高。
注意： 如果使用多個 background-image 源但還想設定 background-color，則 background-color 引數需要放在列表的最後。
屬性值
| 值 | 描述 | CSS | 演示 |
|---|---|---|---|
| background-color | 設定要使用的背景顏色 | 1 | 演示 ❯ |
| background-image | 設定要使用的一個或多個背景影像 | 1 | 演示 ❯ |
| background-position | 設定背景影像的位置 | 1 | 演示 ❯ |
| background-size | 設定背景影像的大小 | 3 | 演示 ❯ |
| background-repeat | 設定背景影像的重複方式 | 1 | 演示 ❯ |
| background-origin | 設定背景影像的定位區域 | 3 | 演示 ❯ |
| background-clip | 設定背景影像的繪製區域 | 3 | 演示 ❯ |
| background-attachment | 設定背景影像是固定的還是隨頁面滾動 | 1 | |
| initial | 將此屬性設定為其預設值。閱讀關於initial | 3 | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit | 2 |
相關頁面
CSS 教程：CSS 背景，CSS 背景（進階）
HTML DOM 參考：background property
