使用CSS3的background-size优化Sprites图显示

浏览数：15 / 时间：2015年06月09日

可以创建一张Sprites图，这张图既有普通分辨率图像，又有高分辨率下的图像？

你可以，但你还是要面对，你的用户在一个较慢的带宽下下载一个大图的烦恼。你也要同时面对IE9以下的浏览器不支持background-size的麻烦问题。

你最好还是分别为高分辨率和普通分辨率创建不同的两张Sprites图。这个时候又有不同的声音了，这不是增加工作量吗？但这真的不是,在我的工作流中，我会先创建一张高分辨率的Sprites图像，然后制一份，并把尺寸缩放一半。当图像需要更新时，只需要再一次处理高分辨率下的图像，然后复制，重置一半的尺寸保存。

当我的Sprites图像是300px,如何指定background-size为32px呢？其实不难，只需要一点点数学计算,这是一个很初级的过程。

在我们的实例中,我们使用媒体社交图标.我想让他们都按16px x 16px的大小显示。我们将创建一个适合Retina屏幕设备的Sprites 图像，将图像尺寸翻倍(32px x 32px)，并且保存他。为了保证普通显屏设备的图像显示，在这个图像的基础上做了一半的缩小。

在最初的CSS样式中，background-position的属性值都不需要进行任何设置，因为他们的默认值都是“0”，如下所示：

#social-icons .facebook {
  background: url(images/social-sprite.png); 
  background-position-x: 0px; 
  background-position-y: 0px;
  height: 16px;
  width: 16px;
}
 
#social-icons .facebook:hover {
  background-position-y: -16px;
}

对于我们的Retina屏幕显示，我们必须声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器。我们同时改变背景大小而不是宽度和高度。

因此，最关键的问题是，我们怎么知道background-size属性值要设置为多少？

这里有一个公式

高分辨率图像宽度 / 目标图像宽度 = X

原始Sprites图像宽度 / x = background-size的宽度值

实例说话

我们高分辨率下的图标是32px x 32px;

我们目标图像的宽度是“16px”；

我们Sprites图像的总宽度是“96px”

根据前面的公式可以得知

32/16 = 2

96/2 = 48

最后的一件事情。我们只计算了背景图像的宽度值，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。当然你也可以设置相的的值（设置background-sizer的宽度为auto，高度为具体值），但我发现设置宽度会比较容易。

@media screen and (-webkit-min-device-pixel-ratio: 2), 
screen and (max-moz-device-pixel-ratio: 2) {
  #social-icons .facebook {
    background: url(images/social-sprite2x.png); 
    background-position-x: 0px; 
    background-position-y: 0px;
    background-size: 48px auto;
  }
 
 #social-icons .facebook:hover {
   background: url(images/social-sprite2x.png); 
   background-position-x: 0px; 
   background-position-y: -32px;
 }