css3中背景属性background-size

background-size属性是背景属性之一,此属性可以使用四种不同的语法：关键词语法、一个值语法、两个值语法和多背景语法。

html {
  background: url(greatimage.jpg);
  background-size: 300px 100px; 
}

关键词

除了默认值（auto），还有两个关键字可以用于背景大小：cover和contain

• cover：告诉浏览器要确保图像始终覆盖整个容器，即使它必须拉伸图像或从其中一个边缘剪下一点。
• contain：表示始终显示整个图像，即使这样会在侧面或底部留下一点空白。
• 默认关键字auto：告诉浏览器根据图像的实际大小和纵横比自动计算大小。

一个值

如果只提供一个值（例如，背景大小：400px），它将计算宽度，并将高度设置为自动。您可以使用任何CSS大小的单位，包括像素、百分比、ems、

viewport units视区单位等。

两个值

如果提供两个值，第一个值设置背景图像的宽度，第二个值设置高度。像单值语法一样，您可以使用您喜欢的任何度量单位。

多背景

您还可以组合上述任何方法并将它们应用于多个图像，只需在每个语法之间添加逗号即可。例子：

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /*第一幅图像为300x100，第二幅图像覆盖整个区域*/
}

使用多个图像时，请记住背景图像的堆叠顺序，第一幅永远在最上面，后面以此类推。

浏览兼容：IE9+