如何將CSS網址設置爲絕對位置？

Question

我工作的HTML5移動應用程序，我最初必須通過CSS設置DIV項的背景如下：

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

在我的應用程序，我有一個基於改變的背景DIV的方法從使用jQuery以前的方法在下拉列表中做出選擇：當我在我的網頁根

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

從通過對其他答案我覺得你爲自己創造一個問題，那並不是你的意見閱讀真的存在。如果url('/images/ClanSpider.png')在您上傳到Web服務器時正常工作，那麼訣竅是在本地工作時使其工作方式相同。到目前爲止，這是最簡單的方法，尤其是如果你的焦點是一個離線的應用程序，它對服務器端的要求（我假設是真的，正如你提到的file:/// URIs）沒有什麼問題，就是運行一個本地web服務器。

的Python附帶一個模塊SimpleHTTPServer，如果你有Python installed然後開始它是要你L5RHonor項目目錄在命令提示符併發出以下命令即可：

python -m SimpleHTTPServer 

然後，而不是訪問您的像這樣的URI文件：

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

你會訪問他們像這樣：

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

現在所有的根相對文件路徑都能正常工作，因爲離線緩存在Chrome中可以正常工作，您可以從命令提示符窗口中的日誌中看到它正在請求並緩存根據你的清單正確的文件。

Answer 2

CSS文件的位置無關緊要，您正在修改HTML元素的.style屬性。這與使用樣式屬性相同。

由於這是嵌入在文檔中的CSS，所有的URI都是相對於文檔。

你可能想用/開始的URL，或者如果你真的想在你的問題中指定的絕對位置：http://

Answer 3

嘗試把一個斜線對這些通路代表根。

即使用：的

url('/images/ClanSpider.png') 

代替

url('images/ClanSpider.png') 

Answer 4

嘗試在URL的開始添加/？

Answer 5

最簡單的解決方案顯然是在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 + ')');