响应css精灵+视网膜

Question

最近几天我读了很多关于这个主题的文章，但没有找到解决方案。我有两个精灵集，一个是普通显示器的低质量，另一个是视网膜显示器的高质量。

我的问题是，我的网站必须响应，图形应该根据浏览器窗口调整大小。但是对于background-size属性，我似乎无法告诉浏览器调整精灵的大小。到目前为止，我得到的是：

#logo-img {
max-width: 100%;
text-indent: -9999px;
height: 85px;
width: 360px;
background-image: url('/images/sprites-sa026cef942.png');
background-position: 0 -2609px;
background-repeat: no-repeat;
overflow: hidden;
outline: 0 none !important;
display: block;
white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
#logo-img {
background-image: url('/images/sprites-retina-se61e802cf4.png');
background-position: 0 -2601px;
-webkit-background-size: 360px, auto;
-moz-background-size: 360px, auto;
-o-background-size: 360px, auto;
background-size: 360px, auto;
}
}

HTML是

<a href="#" id="logo-img">
<h1>My logo text</h1>
</a>

一切都很好，除了在移动设备上，或者在调整浏览器窗口大小时。徽标被剪切，并且不会根据浏览器窗口调整大小。我玩的是max-width: 100%;和height: auto;，但这只会影响轮廓，而不会影响其中的精灵。

希望有人知道解决方案。它不一定要兼容IE8，但它会很好；)

EDIT在使用精灵之前，我使用background-size: contain;来确保背景图像的大小调整为元素的大小：

#logo-img {
background:url(../images/sprites-retina/logo.png) no-repeat center center;
background-size: contain;
max-width: 100%;
text-indent:-9999px;
height: 85px;
width: 360px;
overflow: hidden;
outline: 0 none !important;
display: block;
white-space: nowrap;
}

这很有效，但我不能使用精灵表。也许这让我明白了我的意思。

EDIT2

我做了一把小提琴http://jsfiddle.net/euvRD/2/

Answer 1

我认为您需要从background-size行中删除逗号，并且可能还需要将高度设置为85px：

-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;

但我认为逗号是这里的主要问题。这对你有帮助吗？