background-size

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

CSS 中的 background-size 属性是最有用且最复杂的背景属性之一。此属性有许多变体和不同的语法,所有这些语法都有不同的用例。以下是一个基本示例

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

这是背景大小的双值语法的示例。使用此属性有四种不同的语法:关键字语法、单值语法、双值语法和多背景语法。

关键字

除了默认值(auto)之外,您还可以使用 background-size 使用两个关键字:covercontain

区别

cover 指示浏览器确保图像始终覆盖整个容器,即使它必须拉伸图像或从某个边缘裁剪一点。另一方面,contain 表示始终显示整个图像,即使这会在侧面或底部留出一些空间。

默认关键字 — auto — 指示浏览器根据图像的实际大小和纵横比自动计算大小。

一个值

如果您只提供一个值(例如 background-size: 400px),它表示宽度,高度设置为 auto。您可以使用任何您喜欢的 CSS 大小单位,包括像素、百分比、em、视口单位等。

两个值

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

多张图像

您还可以组合以上任何方法并将其应用于多张图像,只需在每个语法之间添加逗号。例如

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

使用多张图像时,请记住背景图像的 堆叠顺序

演示

此演示展示了 covercontain 和多张背景图像的示例,其中混合使用像素值和关键字值。

浏览器支持

IEEdgeChromeFirefoxSafariOpera
9+全部全部3.6+全部全部
iOS SafariChrome AndroidFirefox AndroidAndroid 浏览器Opera Mobile
全部全部全部90+全部
来源:caniuse

更多信息