angular-retina.js 和 css 背景图片答案

【问题标题】：angular-retina.js and css backgground imageangular-retina.js 和 css 背景图片
【发布时间】：2014-12-12 19:44:08
【问题描述】：

我开始使用 (retina.js) 为视网膜显示器加载替代图像。

<img ng-src="/path/to/image.png" width="100" height="100">

没有问题。

所以我开始用这个来改变我所有的静态图像。

但我在我的 CSS 中将其中一些加载为背景图片：

.logo {
  display: inline-block;
  width: 60px;
  height: 25px;
  background: url(../img/logo-footer.png) no-repeat;
}

<li class="logo">
...

如何更改此设置以使用ng-src/retina.js 加载图像？

【问题讨论】：

嗯，直到现在我还没有任何反应......所以解决我的问题的唯一方法是让它们作为普通图像加载，而不是作为背景图像。

标签： angularjs retina.js

【解决方案1】：

您可以在 css 中使用媒体查询

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

【讨论】：

【解决方案2】：

看看documentation for retina.js on GitHub。向下滚动到描述 SASS、SCSS 和 LESS 的部分。在这些下方，您将看到 CSS 是如何呈现的。你没有提到你是否使用任何预处理器，但如果你是，我在下面引用该网站：

SCSS

#item {
  @include retina('/images/my_image.png', 3, cover, center center no-repeat);
}

萨斯

#item
  +retina('/images/my_image.png', 3, cover, center center no-repeat)

少

#item {
  .retina('/images/my_image.png', 3, cover, center center no-repeat);
}

手写笔

#item
  retina('/images/my_image.png', 3, cover, center center no-repeat)

不管是什么方言，输出实际上都是一样的：

#item {
  background: url("/images/my_image.png") center center no-repeat;
  background-size: cover;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5),
       all and (-o-min-device-pixel-ratio: 3 / 2),
       all and (min--moz-device-pixel-ratio: 1.5),
       all and (min-device-pixel-ratio: 1.5) {
  #item {
    background: url("/images/my_image@2x.png") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #item {
    background: url("/images/my_image@2x.png") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  #item {
    background: url("/images/my_image@3x.png") center center no-repeat;
    background-size: cover;
  }
}

【讨论】：