使用CSS3的background-size优化苹果的Retina屏幕的图像显示
特别声明：此篇文章根据About Josh Byers的英文文章《Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.studiopress.com/design/css-background-size-graphics.htm以及作者相关信息
译者：大漠
前面我写过如何优化Retina屏幕下的图像。
如何优化Retina屏幕下的图像一文中从CSS3的background-size切入，介绍了background-size的属性使用方法，然后转入正题，介绍了Retina屏幕下的图像优化。如果你对background-size属性不太了解，建议你先了解一下。不管是上一篇还是今天要介绍的这篇文章，background-size都是非常重要的一个属性。或者说，Retina屏幕下对图像的显示处理，background-size起着很重要的作用。
大漠
在如何优化Retina屏幕下的图像一文中，Josh Byers介绍了一个实例，在这个实例中，Josh Byers说：“你可以通过CSS3 Media Queries为Retina屏幕设备提供一个高分辨率的图像”。
虽然这种方法通过多张图像来显示，增加了工作量，但我相信，为最终用户服务这是最好的选择。因为只有给Retian屏幕设备用户提供一个高质量的图像。
为了做到这一点，我们需要一种新的技术支持，这种新的技术就是CSS3的background-size属性。我没有详细介绍这个属性的来龙去脉，只是通过一些练习简单介绍了一下。
作为奖励，这篇文章我向大家介绍如何使用background-size让高分辨率的图片精灵（sprites）在Retina屏幕下完美显示。
什么是background-size属性？
background-size属性是CSS3新增加一个背景属性，正如他的名称一样，你可以通过这个属性来控制背景图片的尺寸大小。
background-size有几个属性值，可以设置背景图片的尺寸大小：
你可以使用像素（px）值，第一个值设置背景图像的宽度，第二个值设置背景图像的高度，如果你只设置了一个值，那么另个值默认为“auto”值。
div {
background: url(logo.png) no-repeat;
background-size: 150px 150px;
height: 200px;
width: 400px;
}
你也可以使用百分比值（%），当你使用百分比值时，background的尺寸是相对于容器的宽度计算。如下面的例子所示，我们容器的宽度是“400px”，当我们设置“background-size”的值为“25%”时，背景图像的宽度就变成了“100px”。
div {
background: url(logo.png) no-repeat;
background-size: 25% auto;
height: 200px;
width: 400px;
}
"cover"值，可以让背景图像等比例放大到填满整个容器。
div {
background: url(logo.png) no-repeat;
background-size: cover;
height: 200px;
width: 400px;
}
"contain"值可以让你的背景图像缩放到最大宽度和高度，并且让整个背景图像保持在容器内。
div {
background: url(logo.png) no-repeat;
background-size: contain;
height: 200px;
width: 400px;
}
background-size取值为“contain”理解起来有点歧义，他让背景图像能进行缩放，那是根据容器的大小进来进行缩放的，此时会有两种情形，当背景图像放到最大宽度时，背景图像达到容器宽度，但未达到容器高度时，会以容器的宽度为相对物，其高度不会在继续放大；另一种情形就是当背景图像放大到最大宽度时，背景图像的高度与容器高度相同时，那么会以容器的高度为相对物，其宽度不会在继续放大。
有关于CSS3的background-size属性的详细使用，大家可以点击这里。
大漠
Retina屏幕下使用background-size属性
正如我所说的，苹果推出Retina屏幕显示技术，他们不希望让普通显屏下的相同物理尺寸在Retina屏幕下显示更小。在iPhone4屏幕下显示的icon尺寸要和3G S下的相同。
为了完成这种效果，在Retina屏幕下图像的尺寸都会翻倍。这样一来，如果图像的像素不翻倍，那么图像在Retina屏幕设备下就会变得模糊不清。
为了抵消这个现像，我们需要制作图像的像素大小也翻倍，然后通过background-size属性来控制他的大小，让其在Retina屏幕显示达到一致的效果。
例如我想创建一个LOGO，填充在一个“100px x 100px”的容器中，那么我就需要制作并上传一个至少翻两倍的像素的图像。
在我们的实例中，LOGO的实际大小是“500px x 500px”。如果我将logo图像做为背景填充在一个容器中,并且没使用“background-size”来设置背景图像的尺寸大小，此时容器就会对背景图像进行裁剪。
div {
background: url(logo.png) no-repeat;
height: 100px;
width: 100px;
}
很显然，我们可以使用“Media Queries”查询设备的“pixel rotio”是不是“2”,把这张背景图像只使用在Retina屏幕设备下。
我们还将设置“background-size”的值为“100px 100px”。实际上我们在Retina屏幕设备下使用的图像是“500px x 500px”这张，但上通过css让他在浏览器显示出来却是“100px x 100px”。
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2) {
div {
background: url(logo.png) no-repeat;
background-size: 100px 100px;
height: 100px;
width: 100px;
}
}
现在，如果你的图形中有小于1px的线，你做缩小尺寸会有一些的问题。这个你需要视具体情况试验一下。
Sprites呢？
我是不是可以创建一张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;
}
}
当然，实现本文演示的效果有多种方法，他们各自有自己有优点和缺点。我个人认为，到目前为止，使用Media Queries和高分辨率的Sprites是最好的选择。
最后希望这篇教程对您有所帮助。如果您有更好好的方法希望能与我们一起分享。
译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://www.studiopress.com/design/css-background-size-graphics.htm
中文译文：https://www.fedev.cn/css/css-background-size-graphics.html
Nike Zoom Kobe IV