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+