如何在 HTML 中提高 URL 的 src 路径的级别？

我存储样式表在{根}/样式，而图像在{根}/图像为一个网站。 如何在样式表中给出路径，以便在图像目录中查找指定的图像？

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

379154 次浏览
小开

Use ../:

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

你可以随时使用它，例如 ../../images/，甚至在不同的位置，例如 ../images/../images/../images/(当然与 ../images/相同)

小开
最佳答案

使用 ..指示父目录:

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

In Chrome when you load a website from some HTTP server both absolute paths (e.g. /images/sth.png) and relative paths to some upper level directory (e.g. ../images/sth.png) work.

但是！

当你加载(在 Chrome 中!)一个来自本地文件系统的 HTML 文档，你不能访问工作目录上面的目录。也就是说，你不能访问 ../something/something.sth和改变相对路径绝对或任何其他不会帮助。

小开

以下是有关相对文件路径的所有信息:

  • 从 /开始返回根目录并从那里开始

  • 从 ../开始，向后移动一个目录并从那里开始

  • Starting with ../../ moves two directories backward and starts there (and so on...)

  • To move forward, just start with the first sub directory and keep moving forward.

点击 给你了解更多细节！

小开

Supposing you have the following file structure:

-css
--index.css
-images
--image1.png
--image2.png
--image3.png

在 CSS 中，您可以访问 image1，例如，使用行 ../images/image1.png。

注意 : 如果您正在使用 Chrome，它可能无法工作，并且您将得到一个无法找到该文件的错误。我有同样的问题，所以我只是 从 chrome 中删除了整个缓存历史记录和它的工作。

小开

如果你将样式表/图片存储在一个文件夹中，以便多个网站可以使用它们，或者你想在同一服务器上的另一个网站上重用相同的文件，我发现我的浏览器/Apache 不允许我进入网站根 URL 之上的任何父文件夹。出于安全原因，这似乎是显而易见的——除了指定的 Web 文件夹，用户不能在服务器上浏览其他任何地方。

Www.mywebsite.com/../images 不起作用

作为一种变通方法，我使用 Symlinks:

进入 www.mywebsite.com 目录 运行命令 ln-s. ./images images

Now www.mywebsite.com/images will point to www.mywebsite.com/../images


提交答案