Question

我正在开发一个HTML5移动应用程序，我最初通过CSS设置了DIV项目的背景，如下所示：

background-image: url('images/ClanSpider.png');

在我的应用程序中，我有一个方法可以根据使用jQuery从前一个方法的下拉列表中所做的选择来更改背景DIV：

function ResetMyHonor()
{       
   ClanImage = 'images/Clan' + MyClanName + '.png';
   $("#MyClanName").html(MyClanName); 
   $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}

当我在我的页面的根目录时，所有这一切都正常。但是，我在应用程序中有一些链接使用哈希标记来导航页面（例如#MyHonor）。当我导航到其中一个标签并调用上面的重置功能时，图像会中断。当我拉出Chrome Inspector查看DIV标记时，它会说它正在尝试加载的图像是“images / MyHonor / ClanSpider.png”，它不存在。

我知道CSS网址会在应用程序中引用它的位置生成链接，但是在应用程序中移动CSS文件的位置并不重要。

有没有办法让我重写url处理的内容或指定DIV背景图像的替代方法，而不进行任何类型的服务器端处理？理想情况下，此应用程序将运行HTML5的清单缓存功能，因此我将无法访问任何基于服务器的语言。

Answer 1

从阅读你对其他答案的评论我认为你为自己创造了一个并不存在的问题。如果在您上传到Web服务器时url('/images/ClanSpider.png')将起作用，那么诀窍就是在本地工作时使其工作方式相同。到目前为止，这是最简单的方法，特别是如果您的重点是离线应用程序，它几乎没有服务器端要求（我假设是真的，正如您提到的file:/// URI），就是运行本地Web服务器。

Python附带模块SimpleHTTPServer，如果你有Python installed，那么启动它就像在命令提示符下转到L5RHonor项目目录并发出以下命令一样简单： / p>

python -m SimpleHTTPServer

然后，不要使用这样的URI访问您的文件：

file:///H:/Projects/L5RHonor/images/ClanSpider.png

你会像这样访问它们：

http://localhost:8000/images/ClanSpider.png

所有根相对文件路径现在都可以正常工作，这是一个额外的好处，离线缓存可以在Chrome中正常工作，您将能够从命令提示符窗口中的日志中看到它正在请求并缓存正确的根据你的清单文件。

Answer 2

尝试在这些路径上加上一个前导斜杠来表示根。

即使用：

url('/images/ClanSpider.png')

而不是

url('images/ClanSpider.png')

Answer 3

最简单的解决方案显然是在URL中添加斜杠以使其成为绝对值。这样可以正常工作，但是无法将应用程序移动到子目录中，或者将静态资源移动到其他服务器。如果这是一个问题，有各种替代方法。

如果可能的背景图像数量是有限的，您可以在自己的类中定义每个图像：

.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); } 
...

然后执行.addClass()设置正确的图像。

除此之外，据我所知，在Javascript中设置背景图片路径时，无法指定相对于样式表（而不是当前文档）的路径。您必须使用绝对路径，或在JavaScript中定义根路径，并使用：

// in the script head
imageRoot  = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');

Answer 4

CSS文件的位置无关紧要，您正在修改HTML元素的.style属性。这与使用样式属性。

相同

由于这是嵌入在文档中的CSS，因此所有URI都与文档相关。

您可能希望使用/启动网址，或者如果您确实需要问题中指定的绝对位置：http://

Answer 5

尝试在网址开头添加/？

如何将CSS网址设置为绝对位置？

5 个答案: