CSS background-image 屬性
示例
為 <body> 元素設定 background-image
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
自己動手試一試 »
示例
為 <body> 元素設定兩個背景影像
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
background-image 屬性為元素設定一個或多個背景影像。
預設情況下，背景影像放置在元素的左上角，並沿垂直和水平方向重複。
提示：元素的背景是元素的總大小，包括內邊距和邊框（但不包括外邊距）。
提示： 始終設定一個 background-color，以便在影像不可用時使用。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS1 + CSS3 中的新值 |
| JavaScript 語法 | object.style.backgroundImage="url(img_tree.gif)" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
background-image: url|none|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| url('URL') | 影像的 URL。要指定多個影像，請用逗號分隔 URL。 | 演示 ❯ |
| none | 不顯示背景影像。這是預設值 | |
| conic-gradient() | 將圓錐漸變設定為背景影像。定義至少兩種顏色 | 演示 ❯ |
| linear-gradient() | 將線性漸變設定為背景影像。定義至少兩種顏色（從上到下） | 演示 ❯ |
| radial-gradient() | 將徑向漸變設定為背景影像。定義至少兩種顏色（從中心到邊緣） | 演示 ❯ |
| repeating-conic-gradient() | 重複錐形漸變 | 演示 ❯ |
| repeating-linear-gradient() | 重複線性漸變 | 演示 ❯ |
| repeating-radial-gradient() | 重複徑向漸變 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
為 <body> 元素設定兩個背景影像。讓第一個影像僅顯示一次（不重複），讓第二個影像重複
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
自己動手試一試 »
示例
使用不同的背景屬性建立“英雄”圖片
.hero-image {
background-image: url("photographer.jpg"); /* 使用的圖片 */
background-color: #cccccc; /* 如果圖片不可用時使用 */
height: 500px; /* 您必須指定高度 */
background-position: center; /* 居中圖片 */
background-repeat: no-repeat; /* 不重複圖片 */
background-size: cover; /* 將背景圖片縮放到覆蓋整個容器 */
}
自己動手試一試 »
示例
為 <div> 元素設定線性漸變（兩種顏色）作為背景影像
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}
自己動手試一試 »
示例
為 <div> 元素設定線性漸變（三種顏色）作為背景影像
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}
自己動手試一試 »
示例
repeating-linear-gradient() 函式用於重複線性漸變
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
自己動手試一試 »
示例
為 <div> 元素設定徑向漸變（兩種顏色）作為背景影像
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow);
}
自己動手試一試 »
示例
為 <div> 元素設定徑向漸變（三種顏色）作為背景影像
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
}
自己動手試一試 »
示例
repeating-radial-gradient() 函式用於重複徑向漸變
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 背景、CSS 背景（高階）、CSS 漸變
HTML DOM 參考：backgroundImage 屬性
