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)