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

Question

我的 CSS 文件位于：

Project/Web/Support/Styles/file.css

我的图片位于：

Project/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文件中指定图像文件路径的正确方法是什么？

Answer 1

你的CSS在这里：

Project/Web/Support/Styles/file.css

1 次

../

表示

Project/Web/Support

和 2 次

../

即

../../

表示项目/Web

尝试：

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

Answer 2

有两种基本方法：

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

或

url(/Web/images/image.png)

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

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

Answer 3

使用以下内容。

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

这应该有效。

Answer 4

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

尝试：

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

Answer 5

您还可以添加内联 css 以添加图像作为背景，如下例所示

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

Answer 6

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

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

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

carpera 图像已经在静态文件中