CSS3+H5 背景图片踩坑：关于background-size属性你不容错过的指南

背景图片无法撑开容器？罪魁祸首是 background-size

作为网页设计师，我们经常需要在网页设计中使用背景图片。然而，有时我们会遇到背景图片无法撑开容器的问题，这让人十分头疼。今天，我们就来揭开这个谜团，了解 background-size 属性是如何影响背景图片显示的。

罪魁祸首：background-size 的默认值

.box {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
}

使用这段代码，你会发现图片并没有撑开容器，而是被截断了。这是因为 background-size 属性的默认值为 auto auto，表示图片按其原始宽高显示。当图片宽高大于容器宽高时，超出部分会被截断。

破解之法：background-size: contain 和 cover

解决这个问题，我们可以使用 background-size 的 contain 或 cover 值：

• contain： 图片按比例缩小或放大，确保图片完全显示在容器中，不会被截断。但是，如果图片的宽高比例与容器的宽高比例不同，可能会出现留白。
• cover： 图片按比例放大或缩小，确保图片完全覆盖容器，不会出现留白。但是，如果图片的宽高比例与容器的宽高比例不同，可能会出现部分图片被裁剪掉。

一劳永逸：background-size: 100% 100%

如果你想让图片撑开容器，可以使用 background-size: 100% 100%。这样，图片将按比例放大或缩小，完全覆盖容器，不会出现留白或裁剪。

更多选项：length、percentage 和多个值

background-size 还可以使用长度或百分比值。例如：

.box {
  background-size: 50% 50%;
}

表示图片按比例缩小或放大，使图片的宽高分别等于容器宽高的 50%。

background-size 还允许设置多个值，用逗号分隔。例如：

.box {
  background-size: 100% auto, 50% 50%;
}

表示当图片的宽高比例大于或等于容器的宽高比例时，图片按比例放大或缩小，完全覆盖容器，不会出现留白或裁剪。当图片的宽高比例小于容器的宽高比例时，图片按比例缩小或放大，使图片的宽高分别等于容器宽高的 50%。

兼容性

background-size 属性在所有主流浏览器中都得到支持，包括 IE8+。

总结

background-size 属性是控制背景图片显示方式的利器。通过了解其用法，你可以轻松避免背景图片无法撑开容器的问题，让网页设计更加专业和赏心悦目。

常见问题解答

1. 如何让背景图片在容器中居中显示？

.box {
  background-position: center center;
}

2. 如何重复背景图片？

.box {
  background-repeat: repeat;
}

3. 如何设置背景图片不随容器滚动？

.box {
  background-attachment: fixed;
}

4. 如何使用渐变色作为背景？

.box {
  background: linear-gradient(red, blue);
}

5. 如何设置不同的背景图片？

.box {
  background-image: url("image1.jpg"), url("image2.jpg");
}