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

74

我的CSS文件在：

项目/网站/支持/样式/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文件中指定图像文件路径的正确方法是什么？

html css

— 约宾
source

在Firebug / Chrome中对其进行更改，然后看看其中一个显示图片

— Murali Murugesan

这可能帮助......（stackoverflow.com/questions/4862231/...）

— ZIK

您应尽量避免使用相对路径，而应使用绝对路径。

— AfromanJ

它在一个jsp文件中使用。

— Jobin

使用绝对路径有一些限制。这就是为什么我选择相对路径。

— Jobin

163

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

1次../表示Project / Web / Support，而2次../即../../表示Project / Web

尝试：

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

— 手性
source

1

是，对的。同样，如果给出././，您将得到相同的解决方案。-@Hiral

— Nitesh

1

所以路径是相对于当前CSS的，而不是相对于包含CSS的HTML的代码，对吗？

— KNU 2014年

问题： ../意味着回去回去？这就是为什么我们在Project / Web / Support而不是../../意味着我们只在Project。然后，代码不应是背景图片：url（'../../ Web / images / image.png'）; ？我无法理解，请解释。@Hiral

— Harshal Sharma

@HarshalSharma我们必须到达/ Project / Web。1次../-> / Project / Web？Support和2次../即../../将带我们到/ Project / Web。我希望现在已经清楚了。

— Hiral

1

@Hiral好的，我们不计算file.css。../ => Project / Web / Support和../../表示/ Project / Web。因此，一个../将带您回到一个目录。是吗

— Harshal Sharma，

14

有两种基本方法：

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

要么

url(/Web/images/image.png)

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

请注意，我不会做太多的文件夹嵌套。正如您所发现的，这似乎是不必要的，并且使生活有些困难。

— 拉尔夫
source

6

使用以下内容。

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

这将起作用。

— 尼特什
source

8

.指的是当前文件夹，..指的是父目录，应使用该目录。

— Adrian Ber

该级别认为您将其定位././为到达父文件夹的目标。自己尝试。-@AdrianBer

— Nitesh

4

您需要从css文件找回2个文件夹。

尝试：

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

— 在海底
source

1

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

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

— 约格什
source

0

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

完成此操作后，图像文件夹将不再被放置。只是

背景图片：url（“ / image.png”）;

carpera图像已经在静态文件中

— lypef
source