html – CSS的标签url()[复制]

前端之家收集整理的这篇文章主要介绍了html – CSS的标签url()[复制]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Specifying base url for css2个
我正在寻找一种方法来引用/“自定义”网址.我正在使用类似本地浏览器的东西和/路径引用/ unix路径(是的,o.s.根路径!),这绝对不是放置文件的地方.

虽然我可以使用< 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:///协议,所以是的,文件协议IS的根路径实际上是你的操作系统的根,C:/ on windows,/在unix系统上,它不是直接问题因为这是一个本地应用程序(用户必须以某种方式安装它,我已经有权访问这个系统).

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

因此,使用/它不是一个有效的选项,但是因为我的样式表足够分散(它是一个复杂的应用程序,我有类似layouts / something.css main.css和类似的东西),这是一个必须重写的大问题每个网址都是../

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

我认为用基本的html和CSS来解决这个问题是可能的,但看起来并非如此,虽然我可以通过javascript添加“base”标签,但CSS并没有类似的东西.

解决方法

这是一个JavaScript解决方
var absolute_path = "/abs_path/"

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

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

原文链接:https://www.f2er.com/html/226941.html

猜你在找的HTML相关文章