8

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

虽然我可以在 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）在本地运行一个“网站”（嗯，它是一个应用程序）。这或多或少是具有一些附加功能的自定义铬实例。

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

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

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

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

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

4

3 回答 3

0

只需将您的 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"/>

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

于 2013-06-30T18:55:34.340 回答
-1

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

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

于 2013-07-02T22:08:27.377 回答
-3

这是一个javascript解决方案

var absolute_path = "/abs_path/"

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

您可以在需要该url()属性的每个元素上手动执行此操作。拥有一个遍历预定义列表selectors并通过添加absolute_path.

于 2013-06-30T18:44:03.897 回答