用CSS3實現全屏按比例縮放背景圖片

日常看到這種效果都是出如今FLASH全屏動畫網站上（用AS來控制），今天發現原來CSS也能夠實現這種效果。

核心代碼：

html { 
	background: url(bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;  
}

這種方法只支持Safari 3+，Chrome+，IE 9+， Opera 10+， FireFox 3.6+的瀏覽器。
具體的請移步這裏，國外的一篇文章，有詳細的方法介紹：
  http://css-tricks.com/perfect-full-page-background-image/

這篇文章裏的一個示例（這種方法支持的比較好，經測試支持IE7，不支持IE6）：
  http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

文章的另外一個示例（用jQuery實現，支持IE7+ / Chrome / FireFox / Opera / Safari，但不支持IE6）: http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php

另外附上相關案例和插件供參考：

一個全屏背景圖片網站：http://ringvemedia.com/，不過這個是用Mootools實現的，兼容IE6/7。

jQuery插件@jquery-backstretch：
http://srobbin.com/jquery-plugins/backstretch/#demo

http://paulmason.name/media/demos/full-screen-background-image/  （這個不支持IE6）

另外一篇教程文章：
http://www.alistapart.com/articles/supersize-that-background-please/

相關閱讀：

22個用全屏背景圖片的網站：
http://www.awwwards.com/22-css-websites-with-fullscreen-backgrounds.html

HTML5瀏覽器全屏API示例：
http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html