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

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

html
css

538562 次浏览

小开

Use the below.

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

This shall work.

小开

最佳答案

Your css is here: Project/Web/Support/Styles/file.css

1 time ../ means Project/Web/Support and 2 times ../ i.e. ../../ means Project/Web

Try:

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

小开

You need to get 2 folders back from your css file.

Try:

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

小开

There are two basic ways:

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

url(/Web/images/image.png)

I prefer the latter, as it's easier to work with and works from all locations in the site (so useful for inline image paths too).

Mind you, I wouldn't do so much deep nesting of folders. It seems unnecessary and makes life a bit difficult, as you've found.

小开

The solution (http://expressjs.com/en/starter/static-files.html).

once done this the image folder no longer shalt put it. only be

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

carpera that the image is already in the static files

小开

you can also add inline css for adding image as a background as per below example

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