CSS 背景图：如何将整个div填满图片（如果图片小）以及反之

在本文中，我们将介绍如何使用CSS将整个div填满背景图片，并解决图片过小或过大时的问题。通过一些简单的技巧和示例，我们可以很容易地调整背景图片的大小，以适应不同大小的div。

阅读更多：CSS 教程

背景图片填充div

要将背景图片填充整个div，我们可以使用CSS属性background-size: cover。这将自动调整背景图片的大小，以便填满整个div，并且保持原始图像的宽高比。例如，下面的代码将背景图片应用于一个div，并将背景图片填满整个div：

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

在上面的代码中，我们通过url()函数指定了背景图片的路径，然后使用background-size: cover将图片填充整个div。

保持背景图片比例

有时，我们希望背景图片在填充整个div的同时保持其原始比例。为此，我们可以使用background-size: contain属性。该属性将根据div的大小自动缩放背景图片，以确保图片完全显示，并保持其原始宽高比。下面的示例代码将背景图片应用于一个div，并保持原始比例：

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

上述代码将背景图片应用于一个div，并使用background-size: contain属性将背景图片保持原始比例的方式填充整个div。

背景图片的重复与定位

除了调整背景图片的大小之外，我们还可以控制背景图片的重复模式和定位。通过使用background-repeat和background-position属性，我们可以在div中自定义背景图片的显示方式。

背景图片的重复

默认情况下，背景图片将重复显示以填充整个div。如果我们希望背景图片只显示一次，我们可以使用background-repeat: no-repeat属性。下面的示例代码将背景图片应用于一个div，并保证背景图片只显示一次：

div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}

上述代码将背景图片应用于一个div，并使用background-repeat: no-repeat属性确保背景图片只显示一次。

背景图片的定位

通过background-position属性，我们可以控制背景图片在div中的位置。我们可以使用像素值、百分比或关键字（例如left、right、center）来确定背景图片的位置。下面的示例代码将背景图片应用于一个div，并将其定位在div的右上角：

div {
  background-image: url("image.jpg");
  background-position: top right;
}

上述代码将背景图片应用于一个div，并使用background-position: top right属性将其定位在div的右上角。

总结

在本文中，我们学习了如何使用CSS将整个div填满背景图片，并解决了图片过小或过大时的问题。我们了解到可以使用background-size: cover和background-size: contain属性来调整背景图片的大小，以适应不同大小的div。我们还学习了如何使用background-repeat和background-position属性来控制背景图片的重复和定位。通过灵活运用这些技巧，我们可以创建出令人满意的背景图片效果。