原文地址：http://www.alistapart.com/articles/supersize-that-background-please/

本文由堂主翻译，转载请附带本文链接：http://www.osmn00.com/translation/215.html

----------------------------- 以下是正文 -----------------------------

在目前这个广告时代，为了品牌和产品的体验我们需要合理的利用屏幕上的每一英寸，因此为网站设置全屏的背景正变得越来越流行。CSS技术使得这种做法变得非常简单，只需一行代码我们就能为页面设置一张非常大的背景图。

body {
  background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
}

演示一展示了在一张页面里设置一张1280*960像素大小的固定位置的居中背景图（它并不随着文档的滚动而滚动）。

那么到底多大尺寸的图片才是足够的呢？显示器和操作系统的换代速度是非常快的，其结果就是现在有非常多的屏幕分辨率需要我们去应付。现在最常见的是1024x768px, 1280x800px, 1280x1024px, 和 1440x900px（堂主：以及22寸的1680x1050）。并且，当高清屏幕（1920x1080px）和支持高达2560x1600px分辨率的专业显示器来临的时候，我们会面临几乎所有可能的分辨率情况。

另外我们还需要考虑到低版本浏览器的情况。尽管现在一系列的浏览器只支持800x600px的分辨率，但他们的使用者还是会常常并不全屏设置他们的浏览器。况且我们目前还没谈及那些更低分辨率的手持终端的屏幕。

相对于使用一张固定图片作为背景，更好的作法是能将图片进行自动缩放以适应任何分辨率的屏幕。不幸的是，CSS 2.1的版本并未对背景图缩放提供任何方法。

针对这个问题曾经有两个解决办法[1、2]，但他们都依赖于HTML里的img元素（替代CSS里的背景图）。它们还对层和表格使用绝对定位或用脚本代码来实现图片的缩放功能。另外，不是所有的这样技术都能一直保持图片原有的比例，最终图片会为了单纯的延伸以适应屏幕而变得面目全非。

CSS3 背景技术带来的拯救

W3C CSS3的背景及边框模型（目前的工作草案）明确定义了新的复合开发者需求的background-size属性。我们会关心的属性有（W3C详情）：

contain

在保持图片原有长宽比（如果有的话）的情况下，最完整地（to the largest size）缩放图片（不剪裁）直到其宽和高都能填充进（fit inside）容器的背景设定区域。

cover

在保持图片原有长宽比（如果有的话）的情况下，最贴切地（to the smallest size）缩放图片（注：剪裁）直到其宽和高都能完整覆盖（completely cover）容器的背景设定区域。

Contain属性值总是在视觉区域内显示完整的图片，当显示区域的长宽比不同于图片的长宽比，会用不透明的边框来填充余下的部分。见演示二。

Cover属性值总是将图片填满整个浏览器窗口，当显示区域的长宽比不同于图片的长宽比，它会剪裁掉图片多余的四周。你可以使用background-position属性来设置背景图在窗口中的定位方式。见演示三。

你可以通过在样式表中添加下面的声明来设置背景的缩放：

body {
  background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

Firefox3.6（需要加-moz前缀，而从Firefox4开始将支持常规的无需加前缀的CSS3属性）、Chrome 5、Safari 5以及Opera 10.54等版本已经可以支持background-size属性，IE9也将支持这一属性（在目前的Preview 3版本中已经得到了应用）。老一些的WebKit和Opera版本的浏览器已经支持了这一属性，但它们所履行的标准是基于尚无contain和cover属性值的原草案。

这个方法的缺陷是没有属性可以为一张图片设定最小的宽、高值。当有人将他的浏览器窗口调整到非常小的时候，背景图片也会随之而变得非常小。设计师们可能并不喜欢这种情况，因为那会使得背景图片过小而变得无法辨认。

添加CSS3媒介设备查询的代码组合

CSS3媒介设备查询（ W3C CSS3 Media Queries Module，一个候选建议）以明确的宽度或高度为设定规则的条件。这令我们可以实现过小的窗口不必缩放背景图。媒介设备查询技术目前支持的浏览器有Firefox 3.5、Chrome、Safari 3以及Opera 7，未来的IE9也会支持这一技术。

使用下面的代码我们可以在分辨率小于1024x768像素的时候不必缩小背景：

body {
  background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

@media only all and (max-width: 1024px) and (max-height: 768px) {
body { 
  -moz-background-size: 1024px 768px;
  background-size: 1024px 768px;
}
} 

注意1024x768像素的分辨率同背景图片（1280x960px）的长宽比是相同的，如果不同会在调整浏览器窗口大小时随着背景图的缩放产生突然的跳跃。

在最后的演示中，演示四和演示五，因为加入了@media规格，所以我们的背景图在小于1024x768像素的情况不会继续缩放。演示五定义了background-position属性使得背景图不是居中显示而是沿着左下角显示，我们可以控制在视觉范围内图片对齐的方式。

回视老技术

随着所有的浏览器厂商都在抓紧开发支持即将实施的HTML5和CSS3技术的浏览器，当下正是所有WEB开发人员兴奋的时刻。因为同传统的老技术相比，我们会看到新的技术是多么的灵巧和简洁。相比于Firefox、Chrome、Safari和Opera的快速更新周期，我们来看看究竟还有多久人们才能使用上IE9会是件有趣的事情，因为很快我们能大规模的应用这些新技术了。