CSS |導入精靈不正確的相對路徑

我想用CSS導入我的精靈，我已經做了100次之前，但這一次它似乎並沒有工作。我使用相對路徑也從我的CSS文件中獲取圖像。CSS |導入精靈不正確的相對路徑

我的文件結構看起來像這樣：

Root 
| 
| Index.html 
| 
|____Content 
    |____css 
    | main.css 
    | 
    |____images 
    | tips.png

的CSS我使用的嘗試，並獲得項目出來的文件是如下

//tips icons 
.sprite-tips{ 
    background: url("../images/tips.png") no-repeat; 
    width: 25px; 
    height: 25px; 
} 
.tips-tick { 
    background-position: 0 0; 
} 
.tips-cross { 
    background-position: -30px 0; 
}

這是我正在嘗試應用它：

<div class="sprite-tips tips-tick"></div>

此代碼是從我的其他工作項目之一複製，它不工作，任何我DEAS？

來源

2015-09-29 Kieranmv95

你確定圖像文件存在，並具有相同的確切路徑和名稱嗎？沒有大/小寫字母的區別？ – deem

是啊所有的拼寫都是正確的，它在項目中:) – Kieranmv95

嘗試使用瀏覽器（例如Chrome瀏覽器）檢查此元素（Inpsect這個元素或類似的東西）。也許它確實加載，但遠離div。您將在那裏獲得關於加載錯誤的信息 - 只是爲了確保。 – deem

我用下面這段代碼解決了這個問題，雖然可能有人請解釋爲什麼這個固定

background: url("/Content/images/tips.png") no-repeat;

來源

2015-09-29 10:29:59 Kieranmv95

似乎無論什麼修正問題是第一個斜槓（'/'）在「內容」。我懷疑爲「內容」更改「..」解決了這個問題，確實在開始時添加了新的斜線似乎是解決方案。您能否再次測試它，替換「...」的「內容」以查看它是否仍然有效？ –

與'...'在哪裏建議它繼續不加載，所以奇怪的 – Kieranmv95

哇，實際上。然後我不知道發生了什麼。無論如何，我很高興你解決了這個問題 –

修訂ANSWER

好像什麼固定的問題（因爲他任命在他的回答中）是在../images之前開始加入新的斜槓(/)。我懷疑爲「內容」改變「..」解決了它，因爲在開始時添加一個新的斜線似乎是解決方案。

舊的（和錯誤的）答案

我模擬我的電腦文件夾和看來問題可能是與.tip-tick類。 .tips-tick { background-position: 0 0; } 刪除樣式時，開發人員控制檯（類別.sprite-tips）中出現的直通線消失。另一個棘手的舉動可能是添加「！重要」聲明，如上圖所示： .sprite-tips{ background: url("../images/tips.png") no-repeat !important; width: 25px; height: 25px; } 讓我知道它是否解決了這個問題。

來源

2015-09-29 10:30:10

tips-tick類是正確的，它現在正在工作，但我需要澄清爲什麼我以前的答案已經工作，而不是100％肯定，我也試圖避免！重要的語法的好處 – Kieranmv95

添加評論你的答案。 –

CSS |導入精靈不正確的相對路徑

回答

相關問題