Javascript retina.js不工作-Don'；我不知道为什么

我没有太多的代码要输入，但正在寻求帮助以保存我头上剩下的头发

我使用的是retina.js，它对任何图像都不起作用。@2x图像与较小的图像位于同一文件夹中。一个，如果它们的大小不是两倍的话-设计师给我发了一张一到两个像素的图片-所以我不担心这个问题，因为我假设一旦加载了其他图片，这个图片在大小正确时会工作

我试过速记背景：url（foo.jpg）。。。。和背景图像：url（foo.jpg），在“”中包含和不包含图像。我不得不承认我错过了一些愚蠢的事情，只是没有看到而已。任何帮助都将不胜感激

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>

---

问题是您试图使用retina.js在CSS中更改图像。我相信标准retina.js功能允许您在html代码中更改/交换图像，如下所示：

<header>
   <img src="/images/logo.png">
</header>

将编译为：

资料来源：

---

太好了，谢谢韦斯顿，你的回答成功了。我会接受你的回答，但我有一个简单的问题：当使用LESS和retina.js时，你必须包含指向LESS样式表和LESS js文件的链接？我以前从未少用过。再次感谢！哦，天哪，我参加这个聚会太晚了@左侧回答您的问题：否。仅当您希望更改样式表中的图像时，才使用LESS/Sass混合。使用

retina.js

不需要使用LESS/Sass mixin。我能看出这是多么令人困惑。。。提供CSS预处理器解决方案的JavaScript解决方案？奇怪，但我还是要：）

    .poster {
 /*background:url(../images/comingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/comingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }

<header>
   <img src="/images/logo.png">
</header>

<header>
   <img src="/images/logo@2x.png">
</header>   

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

#logo { 
   background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}