在 CSS 中添加背景图像

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

在 CSS 中添加背景图像

作者：迹忆客最近更新：2023/03/24 浏览次数：

本篇文章介绍了如何在 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 中设置背景图像。

上一篇：在 CSS 中居中背景图像

下一篇：在 CSS 中创建响应式字体

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享