CSS3 background-size 屬性
實例
指定背景圖像的大小：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
在此頁底部有更多的例子。
流覽器支持
表格中的數字表示支持該屬性的第一個流覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
標籤定義及使用說明
background-size屬性指定背景圖片大小。
| 默認值: | auto |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object object.style.backgroundSize="60px 80px" |
語法
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動) |
| percentage | 將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)" |
| cover | 此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。 |
| contain | 此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。 |
線上實例
拉伸背景圖像完全覆蓋內容面積。
拉伸4個橫向背景圖片。
相關文章
CSS3 教學: CSS3 背景