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 |导入精灵不正确的相对路径

回答

相关问题