如何使用 CSS 的 background-size 属性控制背景图片的大小？请解释 cover 和 contain 的区别。

推荐答案

background-size 属性用于控制背景图片的大小。它可以接受多个值，其中 cover 和 contain 是常用的两个关键字：

• cover: 缩放背景图片以完全覆盖容器。可能会裁剪图片，但不会出现空白区域。图片的长宽比会被保持。
• contain: 缩放背景图片以完全包含在容器中。图片的长宽比会被保持。可能会出现空白区域。

本题详细解读

background-size 属性

background-size 属性除了 cover 和 contain 之外，还可以接收以下值：

• auto: 默认值。保持背景图片的原始尺寸。
• length: 使用具体的像素值（如 100px， 50%）来设置背景图片的宽度和高度。可以设置一个值（表示宽度，高度默认为 auto），也可以设置两个值（分别表示宽度和高度）。
• percentage: 使用容器的百分比来设置背景图片的宽度和高度。 可以设置一个值（表示宽度，高度默认为 auto），也可以设置两个值（分别表示宽度和高度）。
• initial: 将属性恢复到其默认值。
• inherit: 从父元素继承该属性的值。

cover 和 contain 的区别详解

为了更好地理解 cover 和 contain 的区别，我们可以考虑以下场景：

假设有一个容器，其尺寸是 200px * 100px，并有一个背景图片，其原始尺寸是 50px * 25px。

使用 background-size: cover;：

• 图片会被放大，以覆盖整个容器。
• 图片宽度会被放大到至少覆盖容器的宽度 (200px)，其高度会按比例放大。
• 图片的高度也会大于容器的高度，导致图片的上部和下部会被裁剪。
• 最终，图片可能显示为200px * 100px(裁剪后), 保证了容器不会出现空白。

使用 background-size: contain;：

• 图片会被放大，使其完全包含在容器中。
• 图片宽度会被放大到容器的宽度或高度，两者中较小的那个，保持宽高比。
• 在这种情况下，图片的宽度放大到200px后，高度为100px。
• 最终，图片显示为200px * 100px，完全在容器内，可能会在水平或者垂直方向上出现空白。

总结：