Question

我正在尝试使用CSS来导入我的精灵，我之前已经完成了100次，但这次它似乎没有起作用。我正在使用相对路径从我的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;
}

我用来尝试从文件中获取项目的CSS如下

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

这就是我尝试应用它的方式：

module DomainSystem

  def set_db
    @domain = request.domain
    ...
  end
  ...

end

这段代码是从我的其他一个工作项目中复制出来的，它没有用，有什么想法吗？

Answer 1

我通过使用以下代码解决了这个问题，虽然有人可以解释为什么修复它

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

Answer 2

更新的答案

似乎解决了问题（正如他在答案中指定的那样）在(/)之前的开头添加了一个新的斜杠../images。我怀疑改变＆＃34; ..＆＃34; for＆＃34; Content＆＃34;解决了它，因为在开头添加一个新的斜线似乎是解决方案。

OLD（和错误）ANSWER

我在我的计算机上模拟了您的文件夹，似乎问题可能出在.tip-tick类。 .tips-tick { background-position: 0 0; } 删除样式后，开发人员控制台（.sprite-tips类中）出现的直通消失。另一个棘手的举动可能是添加＆＃34;！important＆＃34;声明，如上所示： .sprite-tips{ background: url("../images/tips.png") no-repeat !important; width: 25px; height: 25px; } 如果它解决了这个问题，请告诉我。

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

2 个答案: