使用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以及作者相关信息

作者:About Josh Byers

译者:大漠

前面我写过如何优化Retina屏幕下的图像

如何优化Retina屏幕下的图像一文中从CSS3的background-size切入,介绍了background-size的属性使用方法,然后转入正题,介绍了Retina屏幕下的图像优化。如果你对background-size属性不太了解,建议你先了解一下。不管是上一篇还是今天要介绍的这篇文章,background-size都是非常重要的一个属性。或者说,Retina屏幕下对图像的显示处理,background-size起着很重要的作用。

大漠

如何优化Retina屏幕下的图像一文中,介绍了一个实例,在这个实例中,说:“你可以通过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;
}

css background-size graphics

你也可以使用百分比值(%),当你使用百分比值时,background的尺寸是相对于容器的宽度计算。如下面的例子所示,我们容器的宽度是“400px”,当我们设置“background-size”的值为“25%”时,背景图像的宽度就变成了“100px”。

div { 
  background: url(logo.png) no-repeat;
  background-size: 25% auto;
  height: 200px;
  width: 400px;
}

css background-size graphics

"cover"值,可以让背景图像等比例放大到填满整个容器。

div { 
  background: url(logo.png) no-repeat;
  background-size: cover;
  height: 200px;
  width: 400px;
}

css background-size graphics

"contain"值可以让你的背景图像缩放到最大宽度和高度,并且让整个背景图像保持在容器内。

div { 
  background: url(logo.png) no-repeat;
  background-size: contain;
  height: 200px;
  width: 400px;
}

css background-size graphics

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;
}

css background-size graphics

很显然,我们可以使用“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;
  }
}

css background-size graphics

现在,如果你的图形中有小于1px的线,你做缩小尺寸会有一些的问题。这个你需要视具体情况试验一下。

Sprites呢?

我是不是可以创建一张Sprites图,这张图既有普通分辨率图像,又有高分辨率下的图像?

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

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

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

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

css background-size graphics

在最初的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