如何在HTML中的URL的src路径中上一层？

101

我将样式表存储在{root} / styles中，将图像存储在{root} / images中。如何在样式表中提供路径以在指定图像的图像目录中查找？

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

html css relative-path

— 尖刻的
source

184

使用..指示父目录：

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

— 寂寞的一天
source

我在其他地方也读过，但这是行不通的！（至少在Chrome中是这样）

— 2011年

27

是的但是请注意，该位置是相对于CSS文件的位置，而不是嵌入CSS文件的文档。

— ThiefMaster 2011年

1

@ThiefMaster应该是如果我们仅使用内联CSS

— 1000Gbps

57

这是您需要了解的有关相对文件路径的所有信息：

从开始 /返回到根目录并从那里开始
从开始 ../向后移动一个目录并从那里开始
从开始 ../../向后移动两个目录并从那里开始（依此类推...）
要前进，只需从第一个子目录开始，然后继续前进。

点击这里了解更多详情！

— 阿克鲁瓦拉
source

52

用途../：

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

您可以使用它作为经常你想要的，如../../images/在不同的位置，甚至，如../images/../images/../images/（同../images/当然）

— 盗贼大师
source

9

在Chrome中，当您从某些HTTP服务器加载网站时，绝对路径（例如/images/sth.png）和相对路径都到达某个上级目录（例如../images/sth.png）都可以工作。

但！

当您从本地文件系统加载（在Chrome中！）HTML文档时，您将无法访问当前目录上方的目录。即您无法访问../something/something.sth并将相对路径更改为绝对路径，否则其他任何方法都将无济于事。

— 美洲虎
source

1

重新检查后，我可以报告通过使用../do可以正常运行本地文件系统的相对路径-或至少在这种情况下可以正常运行！

— aateeque 2011年

1

它确实适用于Linux和Windows，而不适用于Mac（根据我的经验）

— gabn88

链接不在此处计算，因为没有相同的来源检查。另外，这个答案已有6年历史，因此浏览器可能已经发生了很大变化。

— jaboja

1

我只是向其他人确认答案

— -Ajay

0

假设您具有以下文件结构：

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

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

注意：如果您使用的是Chrome，它可能无法正常工作，并且会出现一个错误，指出找不到该文件。我遇到了同样的问题，所以我只是从chrome中删除了整个缓存历史记录，并且它起作用了。

— 特雷索斯
source

0

如果您将样式表/图像存储在一个文件夹中，以便多个网站可以使用它们，或者您想在同一服务器上的另一个站点上重复使用相同的文件，我发现我的浏览器/ Apache不允许我转到网站根URL上方的任何父文件夹。出于安全原因，这似乎很明显-除了指定的Web文件夹之外，其他人都不能在服务器上浏览其他任何地方。

例如。不起作用：www.mywebsite.com/../images

作为一种解决方法，我使用符号链接：

转到www.mywebsite.com的目录运行命令ln -s ../images images

现在，www.mywebsite.com / images将指向www.mywebsite.com/../images

— 伦德特
source