如何在 CSS 中给出背景图像路径？答案

【问题标题】：How to give the background-image path in CSS?如何在 CSS 中给出背景图像路径？
【发布时间】：2013-12-01 13:52:44
【问题描述】：

我的 CSS 文件位于：

Project/Web/Support/Styles/file.css

我的图片在：

项目/Web/images/image.png

我想要这个图片在我的 CSS 文件中。

我试过了：

1) background-image: url(/images/image.png);
2) background-image: url('/images/image.png');
3) background-image: url("/images/image.png");
4) background-image: url(../images/image.png);
5) background-image: url('../images/image.png');
6) background-image: url("../images/image.png");

但是。我的页面中没有这张图片。

在css文件中指定图片文件路径的正确方法是什么？

【问题讨论】：

在 Firebug/Chrome 中更改它，看看哪个显示图像
这可能会有所帮助...(stackoverflow.com/questions/4862231/…)
您应该尽量避免使用相对路径，而应使用绝对路径。
在jsp文件中使用。
使用绝对路径有一些限制。这就是我选择相对路径的原因。

标签： html css

【解决方案1】：

你的 css 在这里：Project/Web/Support/Styles/file.css

1 次 ../ 表示项目/Web/支持，2 次 ../ 即 ../../ 表示项目/Web

试试：

background-image: url('../../images/image.png');

【讨论】：

是的，正确的。同样，如果您提供././，您将得到相同的解决方案。 - @Hiral
所以路径是相对于当前 CSS 而不是包含 CSS 的 HTML 对吧？
问题： ../的意思是回去回去吗？这就是为什么我们在 Project/Web/Support 但不会 ../../ 意味着只有我们在 Project。那么代码不应该是background-image: url('../../Web/images/image.png');？我无法理解请解释。 @Hiral
@HarshalSharma 我们必须访问 /Project/Web。 1 次 ../ -> /Project/Web?Support 和 2 次 ../ 即 ../../ 会将我们带到 /Project/Web。我希望现在很清楚。
@Hiral 好的，我们不计算 file.css。 ../ => Project/Web/Support 和 ../../ 表示 /Project/Web。因此，一个 ../ 将带您返回一个目录。是吗？

【解决方案2】：

有两种基本方式：

url(../../images/image.png)

或

url(/Web/images/image.png)

我更喜欢后者，因为它更易于使用并且可以在网站的所有位置工作（对于内联图像路径也很有用）。

请注意，我不会对文件夹进行如此深的嵌套。正如您所发现的，这似乎没有必要，而且会让生活变得有些困难。

【讨论】：

【解决方案3】：

使用下面的。

background-image: url("././images/image.png");

这应该可行。

【讨论】：

. 指的是当前文件夹，.. 指的是父目录，应该使用那个。
该级别认为您通过././ 定位它以到达父文件夹。自己试试。 - @AdrianBer

【解决方案4】：

您需要从您的 css 文件中取回 2 个文件夹。

试试：

background-image: url("../../images/image.png");

【讨论】：

【解决方案5】：

您还可以按照以下示例添加内联 css 以将图像添加为背景

<div class="item active" style="background-image: url(../../foo.png);">

【讨论】：

【解决方案6】：

解决方案 (http://expressjs.com/en/starter/static-files.html)。

一旦完成此操作，图像文件夹将不再放置它。只是

background-image: url("/image.png");

图像已经在静态文件中

【讨论】：