一部分，慢慢更新。取名字叫《卡灰质感》

提示：点击图片可在新窗口中查看清晰大图。

原文地址：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的版本并未对背景图缩放提供任何方法。

原文地址：http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

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

我们知道，通过对一张图片设置百分比的宽度值，可以达到其根据外容器的宽度自动缩放的效果。那对于正在播放中的视频，你是不是也希望可以如此呢？对视频设置固定的比率，就可以做到。这项技术容许浏览器根据视频父容器的宽度来设置视频的尺寸。在固定比例下，一个新的宽度值会触发并计算出一个新的高度值，使得视频具备了同图片一样的可缩放的能力。见演示一。

概述：

简单说就是先创建一个具有合适比例（16:9、4:3等）的容器，之后将视频文件放进这个容器使得其可以根据容器的尺寸伸缩。就这么简单。

技巧：

padding属性便是我们为容器创建固定比例的“魔法石”。我们要为容器设置百分比的padding值，而这个padding值的计算是基于容器的width值的。见演示二。

.wrapper-with-intrinsic-ratio {
	height: 0px;
	padding-bottom: 20%;
	position: relative;
}
.element-to-stretch {
	background: #008080;
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}

让我们重温一下每条声明的规则，从.wrapper-with-intrinsic-ratio开始。