在 CSS 中添加背景图像
本教程介绍了如何在 CSS 中添加背景图片。它还将解释在添加背景图像时有哪些常见的错误。
在 CSS 中当图像和 CSS 文件在同一文件夹时，添加背景图像
我们可以使用 background-image 属性在 CSS 中设置背景图像。然后对于值，我们可以使用 url() 函数，其中图像名称或图像路径是参数。必须在 CSS 中选择 body 标签后编写该属性。这将启用网页整个正文中的背景图像。我们应该根据 HTML，CSS 和图像文件的文件夹结构编写图像名称和路径。我们将针对 HTML 和 CSS 文件解释不同图像位置的一些场景。
如果图像和 CSS 文件位于同一目录中，我们可以简单地在 url() 函数中写入图像名称。例如，我们在目录中有图像 bird.jpg。我们在同一目录中有一个 CSS 文件 style.css；以下代码将设置背景图像。
示例代码：
body{
background-image:url(bird.jpg);
}
此外，我们必须确保 HTML 和 CSS 文件的相对文件路径应该是正确的。如果 CSS 是在 HTML 内部编写的，则图像和 HTML 文件应位于同一目录中。如果它们不在同一目录中，则 CSS 文件在 HTML 文件中的相对路径应该是正确的。
当图像、HTML 和 CSS 文件位于不同文件夹时，在 CSS 图像中添加背景
假设我们有一个名为 index.html 的 HTML 文件夹、一个名为 style.css 的 CSS 文件和名为 bird.jpg 的图像。HTML 文件位于 html 文件夹中，CSS 文件位于 css 文件夹中，图像位于 image 文件夹中。在这样的文件结构中，我们应该知道我们应该如何给出 CSS 文件和图像的相对路径，以便显示背景图像。首先，我们应该确保 HTML 和 CSS 文件是链接的。以下代码将 HTML 和 CSS 文件与上述文件夹结构链接起来。
示例代码：
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
../ 符号表示从当前文件夹后退一步。当我们从 index.html 所在的 html 文件夹后退一步时，我们将到达 css 文件夹所在的父文件夹。然后，我们可以在 css 文件夹中找到 style.css 文件。现在，我们必须以同样的方式在 CSS 文件中提供 bird.jpg 的相对路径。
由于 image 文件夹位于当前 CSS 文件的后退一步，../ 会将我们带回父文件夹。然后，它获取 bird.jpg 所在的 image 文件夹。因此，我们可以毫无错误地在 CSS 中设置背景图像。
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn