在CSS中提供视网膜特定图像不起作用

Question

非常感谢这里的一些帮助。我的网站上有一些社交图标，但在视网膜屏幕上看起来并不是那么好看。因此，我使用媒体查询来为视网膜设备提供这些图像的2x版本。不幸的是，他们不能工作，并将图像向上吹，并减少一半。

请参阅此链接Verdacci.com

图像是精灵，对于视网膜版本，我制作了一个新的精灵，并为css分配了坐标来挑选图标。坐标似乎没问题，但是它将它们吹到50px并且容器是25px，它似乎被切断了。这是我用于普通版和视网膜的CSS。

ul.social-links a.facebook {
display: block;
background: url("images/s-icons.png") no-repeat scroll 0 -6px;
height: 25px;
width: 25px;
transition: background 300ms ease-in-out 0s;
}

ul.social-links a.facebook:hover {
display: block;
background: url("images/s-icons.png") no-repeat scroll 0 -40px;
height: 25px;
width: 25px;
}

对于视网膜媒体

/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

/* Social Media Styles */


ul.social-links a.facebook {
display: block;
background: url("images/s-icons2x.png") no-repeat scroll 0 -12px;
height: 25px;
width: 25px;
transition: background 300ms ease-in-out 0s;
}

ul.social-links a.facebook:hover {
display: block;
background: url("images/s-icons2x.png") no-repeat scroll 0 -71px;
height: 25px;
width: 25px;
}

Answer 1

这里有几个问题：

你拥有@ 2x的精灵图像的大小实际上不是它的两倍。它应该是50px X 1138px。 您还需要将视网膜CSS中的背景大小设置为非视网膜图像的大小。此外，无需设置高度，宽度，背景位置或非视网膜CSS中陈述的任何其他CSS。

示例：

    ul.social-links a.facebook {
        background: url("images/s-icons2x.png") no-repeat;
        -webkit-background-size: 25px 569px;        
        background-size: 25px 569px;
    }