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

Question

我正在尝试使用 CSS 来导入我的 sprites，我之前已经这样做了 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>

这段代码是从我的其他工作项目之一复制而来的，但它不起作用，有什么想法吗？

Answer 1

我使用以下代码修复了这个问题，但有人可以解释一下为什么会修复它

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

Answer 2

更新的答案

似乎解决问题的方法（正如他在回答中指定的那样）是在 ../images 之前的开头添加了一个新的斜杠 (/)。我怀疑为 "Content" 更改“..”是否能解决问题，因为在开头添加一个新的斜杠似乎是解决方案。

旧的（错误的）答案

我在我的电脑上模拟了你的文件夹，看来问题可能出在 .tip-tick class。 .tips-tick { background-position: 0 0; } 删除样式后，出现在开发人员控制台上（.sprite-tips class 内）的划线消失。另一个棘手的步骤是添加“!important”语句，如上所示： .sprite-tips{ background: url("../images/tips.png") no-repeat !important; width: 25px; height: 25px; } 让我知道它是否解决了问题。

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

CSS | importing sprites incorrect relative path

html

css

relative-path

sprite

web