Html CSS |导入精灵的相对路径不正确

我正在尝试使用CSS导入我的精灵，我已经做了100次了，但这一次它似乎不起作用。我也使用相对路径从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>

---

这段代码是从我的另一个工作项目中复制的，它不起作用，有什么想法吗？

我用下面的代码修复了这个问题，尽管有人能解释一下为什么会修复它吗

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

---

更新的答案

---

似乎解决问题的方法（正如他在回答中指定的）是在

。/images

之前的开头添加一个新的斜杠

（/）

。我怀疑将“.”改为“内容”解决了这个问题，因为在开头添加一个新的斜杠似乎是解决办法

旧（错误）答案

我在我的计算机上模拟了你的文件夹，似乎问题可能出在

.tip tick

类上。

。提示勾选{
背景位置：0；
}

删除样式后，出现在开发人员控制台（在

.sprite tips

类中）上的行将消失。 另一个棘手的步骤是添加“！important”语句，如上所示：

.sprite提示{
背景：url（“../images/tips.png”）不重复！重要；
宽度：25px；
高度：25px；
}

---

让我知道它是否解决了问题。

您确定图像文件在那里并且具有相同的确切路径和名称吗？没有大/小字母差异？是的，所有拼写都是正确的，它在项目中：）尝试使用浏览器（例如Chrome）检查此元素（输入此元素或类似的内容）。也许它确实加载了，但是远离了div。你会有关于加载错误的信息-只是为了确定一下。@dem这是我做的第一件事，它设置了sprite tips类的大小，但是jsut似乎没有对第二个类做任何事情tips tick类是正确的，它现在正在工作，但是我需要澄清我之前的答案为什么有效，不是100%确定，我也在试图避免！对于语法的精确性很重要在你的答案上添加了一条注释。似乎解决问题的方法是在“内容”之前加上第一个斜杠（

/

）。我怀疑将“.”改为“内容”解决了这个问题，事实上，在开头加上一个新的斜杠似乎是解决办法。请您再次测试它，将“内容”替换为“…”，看看它是否仍能工作？使用

…

，建议它继续不加载，真是太特别了。那我就不知道发生了什么事。不管怎样，我很高兴你解决了这个问题