背景图像大小 CSS

在Web开发中，很多时候我们需要在网页中使用背景图像。那么如何设置背景图像的大小呢？本文将介绍如何通过CSS来设置背景图像的大小。

语法

background-size: width height;

• width：背景图像的宽度。
• height：背景图像的高度。

示例

按像素大小设置背景图像大小

div {
  background-image: url('image.jpg');
  background-size: 500px 300px;
}

按百分比设置背景图像大小

div {
  background-image: url('image.jpg');
  background-size: 50% 80%;
}

等比例缩放背景图像

div {
  background-image: url('image.jpg');
  background-size: contain;
}

拉伸背景图像

div {
  background-image: url('image.jpg');
  background-size: cover;
}

可选值

• auto：默认值，背景图像按原始大小显示。
• length：按像素大小设置背景图像大小。例如：background-size: 500px 300px;。
• percentage：按百分比设置背景图像大小。例如：background-size: 50% 80%;。
• cover：保持长宽比缩放背景图像，直到背景区域完全覆盖。可能会裁剪图像。
• contain：保持长宽比缩放背景图像，直到背景区域能够完全覆盖。可能留有空白区域。

总结

通过CSS的background-size属性，我们可以很方便地设置背景图像的大小。具体使用根据实际情况选择不同的可选值即可。