CSS 背景图像大小以适应屏幕

在 CSS 中设置背景图像往往需要考虑到不同屏幕尺寸的适配问题。本文将介绍如何设置背景图像大小以适应屏幕，并提供几个常用的示例。

1. 背景图像铺满容器

设置背景图像大小为容器的宽度和高度可以让背景图像铺满容器。

.container {
  background-image: url('bg-image.jpg'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

background-size 属性的值为 contain，表示将背景图像缩放到最大尺寸，但仍然完全包含在容器内。背景图像不会被裁剪，但可能会出现空白区域。

2. 背景图像填满容器

设置背景图像大小为容器的宽度和高度可以让背景图像填满容器。

.container {
  background-image: url('bg-image.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

background-size 属性的值为 cover，表示将背景图像缩放到最小尺寸，但仍然完全覆盖容器。背景图像可能会被裁剪，但不会出现空白区域。

3. 固定背景图像宽度和高度

如果需要固定背景图像的宽度和高度，可以使用 background-size 属性的具体值：

.container {
  background-image: url('bg-image.jpg'); 
  background-size: 800px 600px;
  background-repeat: no-repeat;
  background-position: center;
}

4. 多倍图像支持

为了支持高 DPI 屏幕，可以使用多倍图像来提高清晰度。例如，如果需要使用 2 倍图像，可以设置 background-size 属性为原图像大小的一半：

.container {
  background-image: url('bg-image@2x.jpg'); 
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

总结

本文介绍了如何设置背景图像大小以适应屏幕，并提供了几个常用的例子。在使用背景图像时，可以根据需求选择不同的方法来适配不同屏幕尺寸和支持高 DPI 屏幕。