CSS url()的<base>标签是什么?

8
我正在寻找一种使用 / 引用“自定义”URL的方法。我正在使用类似本地浏览器的东西,而 / 路径引用到 / Unix 路径(是的,操作系统根路径!),这绝对不是我的文件所在的位置。
虽然我可以使用 <base> 在 HTML 中解决这个问题,但我不知道这是否也适用于 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/randomnumber/index.html。
因此,使用/不是一个有效的选项,然而由于我的样式表已经足够复杂(这是一个复杂的应用程序,我有类似layouts/something.css main.css和类似的东西),对于每个URL都必须重写../是一个大问题。
我有哪些选择?在这种情况下,JavaScript选项并不像你想象的那样糟糕。另一个想法是运行一个非常小的Web服务器,它只需要提供静态内容,但是这需要是可移植的、跨平台的,并且不需要安装。
我认为可以通过基本的HTML和CSS来解决这个问题,但看起来不行,虽然我可以通过JavaScript动态添加“base”标签,但CSS没有类似的东西。

@GajusKuizinas 当然可以,不过可能存在一个“时间”问题,我的意思是,CSS3已经发布了,我想知道是否有任何解决方案(也许是CSS变量)。 - Francesco Belladonna
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根目录引用是一个严重的安全问题:

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

你可以创建符号链接到你需要的文件夹。


将CSS移动到根文件夹不是一个选项,因为我的样式表很多而且分散。然而,符号链接是一个有效的选项,但我想在不安装的情况下运行我的应用程序(我仍然可以将符号链接写入tmp,这可能是一个有效的想法!)。无论如何,我写了一个大型更新来解释问题,之前对此过于“泛泛”。 - Francesco Belladonna
@Fire-Dragon-DoL 如果你所说的“很多”是指少于100个,我会在这里使用暴力方法:如果你在本地运行它,CSS文件请求的数量不会困扰你。优点是可维护性:如果添加/重命名一些图像,你只需要更改该文件夹中的CSS即可。 - Jan Turoň
我不确定,如果你在一个css文件中有10个url,并且将其移动到另一个文件夹中,你必须更改10个../路径,对于可维护性来说,这是一场噩梦,至少对我来说是这样...我可以考虑使用sass或类似的东西将所有内容合并到单个css文件中,这可能是一个不错的选择。 - Francesco Belladonna
1
如果您不使用路径,您可以将所有图像与CSS文件一起移动到另一个文件夹中,您需要更改的唯一内容是index.html中的新CSS路径。如果这还不够,您应该寻找适合您要求的HTML / CSS预处理器。 - Jan Turoň

-1

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

例如:../../css/my.css


抱歉,但我不喜欢这个解决方案。例如,如果我移动一个包含10个CSS文件的整个目录,我必须为它们所有重新编写URL。这是一个维护噩梦。 - Francesco Belladonna
你不应该有10个单独的CSS文件。(?!) - Alisso
2
@Alisso 为什么不呢,这是完全合法的。这也比将所有 CSS 放在一个文件中更好的实践方式。 - hilnius
@hilnius 为了获取所有内容访问服务器10次?(不包括库的CDN链接...)谢绝!一个文件,一个下载,统治所有,除非我错过了什么新东西 :) - Alisso
2
@Alisso,这就是为什么我们现在要串联(/构建)CSS文件并在HTML中添加一个单独的<link>。对于开发者来说,拥有许多小而专注的CSS文件更加清晰。一个单一的文件很容易达到20k+行,这将是一个维护的噩梦。 - hilnius
@hilnius - 我以为你是在建议这个人将多个文件上传到网站上,是的,我们在这一点上达成了共识。 - Alisso

-3

这是一个JavaScript解决方案

var absolute_path = "/abs_path/"

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

您可以在每个需要 url() 属性的元素上手动执行此操作。很容易编写一个函数,遍历预定义的 选择器 列表,并通过添加 absolute_path 来修改其背景路径。


18
这个回答非常糟糕,JavaScript 是最不必要的东西。而且它还很难维护。 - Bojangles
2
@Bojangles 我个人不会这样做,但从问题描述来看,似乎OP有他不使用CSS相对路径(这是常规做法)的理由。我已经给出了一个解决方案,以回答根据给定信息提出的问题。 - vikki
我意识到window.location.href是错误的,只有在href是基本url时才起作用..已经更正! - vikki
1
@Bojangles:“不幸的是”,我认为在我的情况下这是一个有效的答案,我写了一个详细的更新来解释原因。无论如何,我仍然希望有一个更好的解决方案。 - Francesco Belladonna
2
@Fire-Dragon-DoL 我从未使用过node.js,但是process.cwd()不会给你当前的基本目录吗?无论这是否为临时目录。无论您是否将应用程序打包为单个文件,您都必须知道静态文件的位置(相对于基本目录)。相对路径选项仍然可行。您可以编写一个脚本,查找所有css文件并根据它们相对于基本目录的位置生成相对路径。您可以在更改目录结构时随时运行此脚本以纠正任何损坏的链接。 - vikki
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接