CSS3属性background-size使用指南

什么是background-size？

background-size 是 CSS3 中的一个新属性，它用于设置背景图片的宽度和高度。

如何使用background-size？

background-size 属性需要设置两个值：宽度和高度。

我们来看看一些示例：

例1：设置一个固定的背景图片尺寸

如果你想要一张背景图片看起来很整齐，可以设置一个固定的尺寸：

background-size: 300px 200px;

这个值用于设置背景图片的宽度为 300px，高度为 200px。

例2：设置背景图片自适应容器

如果你想让背景图片自适应容器的大小，可以使用 cover 属性：

background-size: cover;

这个值用于将背景图片调整为容器的大小，直到至少一个维度完全包含在容器中为止。

background-size可取参数

background-size 还可以使用如下的参数：

• auto：自动大小
• contain：尽可能大地显示图片，以保证整个图片都可见
• length：指定一个长度值
• percentage：指定一个百分比值
• cover：使图片的每个维度至少完全包含在容器中

总结

background-size 可以帮助我们很好地控制背景图片的大小。通过使用 background-size，我们可以使背景图片更加整齐美观，或者使用自适应容器的方式让背景图片自适应不同的设备。