CSS url() 的 <base> 标记 [重复]

Question

我正在寻找一种方法来引用 / 一个“自定义”网址。我使用的是本地浏览器之类的东西，/ 路径引用 / unix 路径（是的，操作系统根路径！），这绝对不是我放置文件的地方。

虽然我可以在 html 中使用 <base> 解决这个问题，但我不明白这是否也适用于 CSS url()，或者是否有类似的东西可以让我指定完整的 url。

此时我对任何解决方案持开放态度，即使使用带有一些自定义函数的 SASS，该函数将重写任何 url，将其替换为完整路径。

为了更清楚地说明我的问题，以下是我的问题的示例以及我希望如何解决它：

/mnt/projects/web/myproject/index.html

...
<base href="/mnt/projects/web/myproject/" />
...

/mnt/projects/web/myproject/style.scss

$base_url: "/path_to_root_folder_dinamically_fetched_on_client_pc/";
body
{
  background-image: url("#{$base_url}mydir/myimage.png");
}

最好的选择显然是url(/mydir/myimage.png) 有效，但通过网络阅读我知道它不起作用。

感谢您的任何建议。

更新 1：

对不起，答案都很好，但没有上下文，很难回答这个问题。 让我再解释一下：我正在使用一个软件 (node-webkit) 在本地运行一个“网站”（嗯，它是一个应用程序）。这或多或少是一个带有一些附加功能的自定义 Chromium 实例。

最大的问题是 node-webkit 使用 file:/// 协议，所以是的，文件协议的根路径实际上是你的操作系统的根目录，在 windows 上是 C:/，在 unix 系统上是 / 而不是直接是一个问题，因为这是一个本地应用程序（用户必须以某种方式安装它，我已经可以访问这个系统）。

第二个问题是，当你将应用程序打包成单个文件时，当用户运行它时，它会被解压到一个临时目录中，以便通过 file:/// 协议实际运行网站，例如 /tmp/随机数/index.html

因此，使用 / 这不是一个有效的选项，但是因为我的样式表足够分散（它是一个复杂的应用程序，我有类似 layouts/something.css main.css 和类似的东西），这是一个很大的必须始终为每个 url 重写 ../ 的问题。

我有什么选择？在这种情况下，javascript 选项并不像您想象的那么糟糕。另一个想法是运行一个非常小的网络服务器，它应该只提供静态的东西，但这需要是可移植的、跨平台的并且不需要安装。

我认为可以使用基本的 html 和 CSS 来解决这个问题，但看起来不是这样，虽然我可以通过 javascript 动态添加“base”标签，但 CSS 没有类似的东西。

Answer 1

这是一个javascript解决方案

var absolute_path = "/abs_path/"

document.body.style.background = "url(" +  absolute_path + "mydir/myimage.png)"

您可以在每个需要url() 属性的元素上手动执行此操作。拥有一个遍历预定义selectors 列表并通过添加absolute_path 来修改其背景路径的函数应该相当简单。

Answer 2

只需将你的 CSS 放到你的基本路径中。

在这个结构中你必须使用路径：background-image: url(images/img1.png);

/index.html (loads styles.css)
/styles.css
/images/img1.png

在此结构中，您可以省略路径：background-image: url(img1.png);

/index.html (loads images/styles.css)
/images/styles.css
/images/img1.png

如果您使用更多路径，您可以拆分 CSS 并将每个部分放置到您需要的路径中。从 unix root 引用是一个严重的安全问题：

<link src="/etc/passwd"/>

您可以创建指向所需文件夹的符号链接。

Answer 3

我在我的 NodeWebkit 应用程序中使用 ../ 相对路径解决了同样的问题。您可能知道 CSS 相对于 HTML 的位置，因此您可以根据需要在树上上下移动。

例如：../../css/my.css