CSS div 背景图片加载

在网页制作中，经常需要使用背景图片来美化页面，如何使用 CSS 给 div 加载背景图片呢？本文将介绍两种方法。

方法一：使用 background-image 属性

使用 CSS 的 background-image 属性来给 div 加载背景图片，可以使用以下步骤：

1. 创建一个包含图片的文件夹，将图片放在其中。
2. 在 CSS 中使用 background-image 属性，将要加载的图片文件路径作为属性值。
3. 为了适应不同的屏幕大小，可以设置 background-size 属性来调整图片的大小。

例如，假设我们有一张名为 background.jpg 的图片，放在一个名为 images 的文件夹中。那么可以像下面这样使用 background-image 属性给 div 加载背景图片：

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

这里，background-size 属性设置成了 cover，意味着图片会被拉伸或缩小，直到完全覆盖 div。

方法二：使用缩写形式

除了使用 background-image 属性，还可以使用更为简洁的缩写形式：background 属性，包含了 background-image、background-position、background-repeat 等多个子属性。

假设我们需要将图片放在 div 的底部中心位置，可以使用以下代码：

div {
  background: url(images/background.jpg) no-repeat center bottom;
  background-size: cover;
}

在上面的代码中，no-repeat 表示图片不重复显示，center bottom 表示将图片放置在底部中心位置。

最后，使用 background-size 属性来调整图片的大小，让它覆盖整个 div。

总结

本文介绍了两种给 div 加载背景图片的方法，使用 background-image 属性和 background 属性。其中，使用 background 属性可以更为简洁方便。同时，为了适应不同的屏幕大小，可以使用 background-size 属性来调整图片的大小。