迹忆客 专注技术分享

本文介绍了在 CSS 中设置背景图片的方法。我们将讨论如何设置图像的路径，以便正确显示背景图像。此外，我们将讨论不同的相对路径。

在 CSS 中使用 background:url() 设置背景图像

我们可以使用 background 属性在 CSS 中设置背景图像。URL() 函数将保存图像的文件路径作为背景图像。background 属性是与背景相关的其他几个属性的简写。这些属性按顺序是 background-color, background-image, background-repeat, background-attachement 和 background-position。使用 background 属性，我们可以在短时间内为所有这些属性分配值。

我们可能出错的关键点是在 URL() 函数中写入图像的路径。我们应该知道图像的位置，在 URL() 函数中写入的路径应该是相对于 CSS 文件的。如果我们在 HTML 文件本身中编写 CSS，路径应该是相对于 HTML 文件的。

在下面的示例中，名为 picture 的图像位于 image 文件夹中。image 文件夹和以下 CSS 文件 style.css 位于同一文件夹中。因此，以下代码将设置背景图像。

文件夹结构如下图所示：

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

示例代码：

body {
    background: url(image/picture);
}

在 CSS 中使用相对路径 /image/picture 设置背景图像

我们可以使用/image/picture 文件路径格式在 CSS 中设置背景图像。在这种格式中，图像位于 image 文件夹内。image 文件夹位于当前网站的根目录。

在下面的示例中，我们将 picture 图像设置为背景图像。在这种格式中，CSS 文件的位置无关紧要。我们不需要写相对于 CSS 文件的文件路径。文件路径是相对于当前网站的根目录写入的。这意味着 image 文件夹位于根目录中。

示例代码：

body {
    background: url(/image/picture);
}

在 CSS 中使用相对路径 ../image/picture 设置背景

我们可以使用 ../ 表示法返回到目录结构中的一个级别。../ 符号可用于在 URL() 函数中写入相对文件路径，同时在 CSS 中设置背景。

例如，我们在 html 文件夹中有一个 HTML 文件 test.html。html 文件夹位于 web 文件夹内。图像 picture 位于 web 文件夹内的 image 文件夹内。在这样的目录结构中，我们可以使用下面的代码来设置背景。

文件夹结构如下图所示：

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

在下面的示例中，我们在 HTML 文件本身中编写了 CSS。../ 符号将我们从 html 文件夹带回到 web 文件夹。然后它找到 image 文件夹，然后在 image 文件夹中找到 picture 文件。这样，我们就可以使用相对路径在 CSS 中设置背景图片了。

示例代码：

body {
    background: url(../image/picture);
}