代码之家 › 专栏 › 技术社区 › Dillie-O

如何将CSS url设置为绝对位置?

background-image html5 css

9

Dillie-O · 技术社区 · 13 年前

我正在开发一个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检查员看DIV标签时,它说它试图加载的图像是“图像/MyNoal/CLANSPION.PNG”,它不存在。

我知道CSS url会根据它在应用程序中的位置生成链接,但在应用程序中移动CSS文件的位置并不重要。

对于我来说,有没有一种方法可以重写从url处理中得到的内容,或者有另一种方法可以指定DIV的背景图像而不进行任何服务器端处理?理想情况下,这个应用程序将通过HTML5的清单缓存功能运行,因此我将无法访问任何基于服务器的语言。

5 回复 | 直到 13 年前

1

8

robertc 13 年前

从你对其他答案的评论来看,我认为你在为自己创造一个不存在的问题。如果 url('/images/ClanSpider.png') 当你上传到web服务器上的时候就可以工作了,那么诀窍就是让它在本地工作时以同样的方式工作。到目前为止,最简单的方法就是这样做,特别是如果你的关注点是一个离线应用程序,它几乎没有服务器端的需求(我假设这是真的,正如你提到的 file:/// uri),即运行本地web服务器。

Python附带一个模块 SimpleHTTPServer ,如果你有 Python installed 然后开始就很简单了 L5RHonor 在命令提示符中输入项目目录并发出以下命令:

python -m SimpleHTTPServer

然后,不要使用这样的uri访问您的文件:

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

您可以这样访问它们:

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

所有与根相关的文件路径现在都将正常工作,作为额外的好处,脱机缓存将在Chrome中正常工作,并且您将能够从命令提示窗口的日志中看到它正在根据清单请求和缓存正确的文件。

2

6

Andrew M 13 年前

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

ie使用:

url('/images/ClanSpider.png')

而不是

url('images/ClanSpider.png')

3

4

Pekka 13 年前

最简单的解决方案显然是在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 + ')');

4

1

Quentin 13 年前

CSS文件的位置不相关,您正在修改 .style HTML元素的属性。这与使用样式相同属性 .

由于这是嵌入在文档中的CSS,所以所有uri都与文件 .

你可能想用一个 / ,或者如果您确实希望在问题中指定绝对位置: http://

5

0

Niet the Dark Absol 13 年前

尝试添加 / 在URL的开头?