CSS background-image 屬性
實例
設置body元素的背景圖像：
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
標籤定義及使用說明
background-image 屬性設置一個元素的背景圖像。
元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。
默認情況下，background-image放置在元素的左上角，並重複垂直和水準方向。
提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，可以使用背景色帶代替。
| 默認值: | none |
|---|---|
| 繼承: | no |
| 版本: | CSS1 |
| JavaScript 語法: | object object.style.backgroundImage="url(stars.gif)" |
流覽器支持
表格中的數字表示支持該屬性的第一個流覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注意: IE8 及其更早版本不支持一個元素上設置多個背景圖片。
屬性值
| 值 | 說明 |
|---|---|
| url('URL') | 圖像的URL |
| none | 無圖像背景會顯示。這是默認 |
| linear-gradient() | 創建一個線性漸變的 "圖像"(從上到下) |
| radial-gradient() | 用徑向漸變創建 "圖像"。 (center to edges) |
| repeating-linear-gradient() | 創建重複的線性漸變 "圖像"。 |
| repeating-radial-gradient() | 創建重複的徑向漸變 "圖像" |
| inherit | 指定背景圖像應該從父元素繼承 |
線上實例
多個背景圖片
本實例演示了文檔中多個背景圖像。
相關文章
CSS 教學: CSS 背景
CSS3 教學: CSS3 背景