CSS 根目录答案

【问题标题】：CSS root directoryCSS 根目录
【发布时间】：2011-10-25 15:53:19
【问题描述】：

我有一个包含背景图片的样式表。

background: url(../Images/myImage.png);

问题是，不同目录的页面都使用这个css！

我的 CSS 文件位于 CSS 文件夹中，图像位于 Image 文件夹中，而我的 html 页面位于许多不同的文件夹中，具体取决于它们的内容和对网站的意义。

我所有的页面都继承了这个 CSS，因为它是 MAIN 主题。

上例中使用的路径是相对路径。显然，此路径仅适用于某些页面。我需要的只是从根文件夹链接css中的图像。因此，无论文件在文件夹结构中的哪个位置，每个路径都是正确的！

我试过了：

~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png

我认为不存在根文件夹选择器...但我希望它存在：/

【问题讨论】：

每次都使用绝对路径，即。 example.com/Images/myImage.png
不需要绝对路径，这不应该是 external 样式表的问题，因为路径总是相对于样式表本身。你是直接把 CSS 代码放在<head> 里吗？
@benhowdle89 不要这样做，因为当您更改域或将其放置在子域中时，一切都会被破坏。我更喜欢/path 方法。
完成 :)

标签： css

【解决方案1】：

点击here了解详细解释！

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

以“/”开头返回根目录并从那里开始

以“../”开头向后移动一个目录并从那里开始

以“../../”开头向后移动两个目录并从那里开始（依此类推...）

要前进，只需从第一个子目录开始，继续前进

【讨论】：

"...继续前进" :') 哈哈没错，继续前进，永不回头，沉湎于过去永远不好

【解决方案2】：

“../”表示升级（父文件夹）链接"../images/img.png" 的问题将不起作用，因为当您使用 ajax 之类的数据从服务器传递到网站时。

您需要做的是用“./”将图像位置指向根目录，然后是第二个文件夹（在这种情况下，第二个文件夹是“images”）

url("./images/img.png")

如果你有这样的文件夹

然后你使用url("./content/images/img.png")，记住你的图片在编辑器窗口中是不可见的，但是当它使用ajax传递给浏览器时它会显示出来。

【讨论】：

【解决方案3】：

我使用相对路径解决方案，

./../../../../../images/img.png

每一个 ../ 都会带你一个文件夹到根目录。希望这会有所帮助..

【讨论】：

小心，服务器安全规则可能会禁止过长的 ../../../ 序列
放置一个带有 6 个父目录导航的相对路径是无法管理的

【解决方案4】：

您只需在 CSS 中输入url(logical path to the image file)

【讨论】：

【解决方案5】：

例如你的目录是这样的：

Desktop >
        ProjectFolder >
                      index.html
                      css >
                          style.css
                      images >
                             img.png

你在你的 style.css 并且你想使用 img.png 作为背景图片，使用这个：

url("../images/img.png")

为我工作！

【讨论】：

【解决方案6】：

/Images/myImage.png

这必须在您的域/子域的根目录中

http://website.to/Images/myImage.png

它会起作用的

但是，我认为它也可以这样工作

图片
- 你的图片.png
款式
- style.css

style.css：

body{
    background: url(../images/yourimage.png);
}

【讨论】：

这是否仅在您的网站托管时才有效？我目前正在使用 Visual Studio 2010 在上传之前调试我的网站。
@AlexMorley-Finch：我不知道。也许是的
@AlexMorley-Finch 任何绝对方法仅在托管在服务器上时才有效，而不是在快速文件预览（如在浏览器上预览文件）。
经过一些研究，只有在网站托管在域中时，在定义路由的路径前放置正斜杠才有效。因为'/'在运行时纯粹被域名替换。因此它不适用于非托管的 html/css 文档:) POW！