background-size · 跟老司機學CSS3

**background-size** * 描述：檢索或設置對象的背景圖像的尺寸大小 * 版本：CSS3 新增屬性 * 繼承性：無 **語法** ``` background-size: 尺寸值; ``` 尺寸值 * length：用長度值設置背景圖大小。不允許負值。【寬度高度】如果只設置一個值，則第二個值為 "auto"。 * percentage：用百分比設置背景圖大小。不允許負值。【寬度高度】如果只設置一個值，則第二個值為 "auto"。 * cover：把背景圖等比縮放至完全覆蓋容器，背景圖有可能超出容器。 * contain：把背景圖等比縮放到寬度或高度與容器的寬度或高度相等，背景圖始終被包含在容器內。 **使用說明** 如果使用 length 與 percentage 定義背景尺寸，可以提供兩個值。如果提供兩個值，第一個用于設置背景圖寬度，第二個用于設置背景圖高度。如果只提供一個值，便用于定義背景圖的寬度，第二個值為 "auto"，此時背景圖以提供的寬度作為參照來進行等比縮放。 **代碼示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-size</title> <style> #container{ width: 400px; height: 400px; border: 10px dotted; padding: 10px; background-image: url(../img/01.jpg); background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <div id="container"> </div> </body> </html> ``` ![background-size](https://box.kancloud.cn/b534864870713a44136be1153718b943_461x450.png)