Question

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

虽然我可以使用<base>在html中解决这个问题，但我不明白这是否适用于CSS 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）在本地运行一个“网站”（好吧，它是一个应用程序）。这或多或少是具有一些附加功能的自定义铬实例。

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

第二个问题是，当您将应用程序打包到单个文件中时，当用户运行它时，它会在临时目录中解压缩，以通过file：///协议实际运行网站，类似于/ tmp / randomnumber / index.html中

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

我有哪些选择？在这种情况下，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

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

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

CSS url的标记（）

3 个答案: