在CSS中的圖像路徑

我正在使用一些CSS框架並試圖顯示圖標（使用類選擇器與background-image屬性）。比方說，我的文件結構是：在CSS中的圖像路徑

Content/site.css 
Content/Folder1/framework.css 
Content/Folder1/Folder2  /framework-images.css 
Content/Folder1/Folder2  /framework-icon1.png

的site.css樣子：

@include "Folder1/framework.css"; 
...

framework.css，如：

@include "Folder2/framework-images.css"; 
...

框架，images.css是：

.selector { 
    background-image: url("icon1.png"); 
}

但是，當我試圖添加到我的HTML元素類「選擇」 Firefox的開發工具讓我發現，它試圖從這裏加載圖標：在正確的路徑是（上午

http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png

我對嗎？）：

~/Content/Folder1/Folder2/icon.png

或只是

http://localhost:1234/Content/Folder1/Folder2/icon.png

那麼，可以錯？如何告訴客戶使用正確的路徑？

P.S.如果它很重要我使用無點（少css）。換句話說，全部.css實際上是。無。

P.P.S.這是ASP.NET MVC4應用程序。

更新： 作爲@djfarrelly指出，問題是不正確的路徑背景圖像：網址（...）。我已將其更改爲：

background-image: url("/Content/Folder1/Folder2/Icon1.png");

並開始工作。但我仍然困惑。任何人都可以解釋爲什麼它不工作沒有完整路徑指定？

來源

2012-12-14 Illia Ratkevych

你是否介意在你分配班級的地方發佈帖子，目前還不清楚「〜」字符是如何得到的（CSS可能是正確的，問題依賴於其他地方）。 – Ulises

@Ulises我很確定這是LESS魔術的一部分：它會爲您生成網址，包括代字號。生成的網址實際上是指向錯誤的位置，還是您只是因爲它的外觀而煩惱？ – cimmanon

感謝澄清，我不熟悉LESS – Ulises

所有對圖像的引用都應該參考網站中的根文件夾以避免混淆。您是否嘗試過你的CSS從根本上改變爲參考：

.selector { 
    background-image: url("/Content/Folder1/Folder2/icon1.png"); 
}

如果包括/應該清理。

編輯： 我最初發布這個瓦特/ ../而不是正確的/引用根文件夾。

來源

2012-12-14 18:22:23 djfarrelly

我認爲background-image url應該與css文件相關。我已經嘗試過指定路徑，但dev.tools指明瞭** http：// localhost：4883/Content /〜/ Content/Folder1/Folder2/icon1.png **。之後，我在開始時嘗試了沒有「..」的url（「/ Content/...」） - 並且它工作正常。感謝您指出問題的根源。 –

是的，我也想過，但我還沒有找到任何證據。你有嗎？ –

在CSS中的圖像路徑

回答

相關問題