CSS background-size 屬性
示例
使用 "auto" 和畫素指定背景影像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
background-size 屬性指定背景影像的大小。
您可以使用此屬性的四種不同語法：關鍵字語法（"auto"、"cover" 和 "contain"）、單值語法（設定影像寬度（高度變為 "auto"））、雙值語法（第一個值：影像寬度，第二個值：高度）以及多背景語法（用逗號分隔）。
| 預設值 | auto |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀有關可動畫化的內容 嘗試一下 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.backgroundSize="60px 120px" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-size | 4 | 9 | 4 | 4.1 | 10 |
CSS 語法
background-size: auto|length|cover|contain|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 預設值。背景影像顯示為其原始大小 | 演示 ❯ |
| length | 設定背景影像的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只給出一個值，則第二個值設定為 "auto"。 閱讀有關長度單位的資訊 | 演示 ❯ |
| 百分比 | 以父元素的百分比設定背景影像的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只給出一個值，則第二個值設定為 "auto" | 演示 ❯ |
| cover | 將背景影像縮放到覆蓋整個容器，即使它需要拉伸影像或剪掉邊緣的一部分 | 演示 ❯ |
| contain | 將背景影像縮放到確保影像完全可見 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
使用百分比指定背景影像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
}
自己動手試一試 »
示例
使用 "cover" 指定背景影像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
自己動手試一試 »
示例
使用 "contain" 指定背景影像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}
自己動手試一試 »
示例
這裡我們有兩個背景影像。我們使用 "contain" 指定第一個背景影像的大小，使用 "cover" 指定第二個背景影像的大小
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}
自己動手試一試 »
示例
使用不同的背景屬性建立“英雄”圖片
.hero-image {
background-image: url("photographer.jpg"); /* 使用的圖片 */
background-color: #cccccc; /* 如果圖片不可用時使用 */
height: 500px; /* 您必須指定高度 */
background-position: center; /* 居中圖片 */
background-repeat: no-repeat; /* 不重複圖片 */
background-size: cover; /* 將背景圖片縮放到覆蓋整個容器 */
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 背景
HTML DOM 參考：backgroundSize 屬性
