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

问题描述 投票:0回答:6

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

html css
6个回答
198
投票

你的CSS在这里:

Project/Web/Support/Styles/file.css

1 次

../
表示
Project/Web/Support
和 2 次
../
../../
表示项目/Web

尝试:

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

16
投票

有两种基本方法:

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

url(/Web/images/image.png)

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

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


6
投票

使用以下内容。

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

这应该有效。


4
投票

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

尝试:

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

2
投票

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

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

0
投票

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

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

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

carpera 图像已经在静态文件中

© www.soinside.com 2019 - 2024. All rights reserved.