在 CSS 中设置背景图像

Sushant Poudel 2023年1月30日 2021年10月2日
  1. 在 CSS 中使用 background:url() 设置背景图像
  2. 在 CSS 中使用相对路径 /image/picture 设置背景图像
  3. 在 CSS 中使用相对路径 ../image/picture 设置背景
在 CSS 中设置背景图像

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

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

我们可以使用 background 属性在 CSS 中设置背景图像。URL() 函数将保存图像的文件路径作为背景图像。background 属性是与背景相关的其他几个属性的简写。这些属性按顺序是 background-color, background-image, background-repeat, background-attachementbackground-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.htmlhtml 文件夹位于 web 文件夹内。图像 picture 位于 web 文件夹内的 image 文件夹内。在这样的目录结构中,我们可以使用下面的代码来设置背景。

文件夹结构如下图所示:

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

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

示例代码:

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

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相关文章 - CSS Background