Фоновый рисунок angular-retina.js и css

Question

Я начал использовать ( 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?

Answer 1

Вы можете использовать медиа-запросы в CSS

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

Answer 2

Посмотрите документацию по retina.js на 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/[e-mail]") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #item {
    background: url("/images/[e-mail]") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  #item {
    background: url("/images/[e-mail]") center center no-repeat;
    background-size: cover;
  }
}