css3教程 CSS3的Background-size很重要

栏目分类：DIV+CSS教程   发布日期：2014-09-12   来源：互联网   浏览次数：次

我说的是background-size。CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术，使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。下面让我们来看看神奇的background-size属性是如何使用的。

background-size CSS属性

这个background-size属性有几个预定义的值，但也可以像其它size属性一样使用数字：

• contain: 包含，整个背景图都要被包含在元素内，没有超出的部分。
• cover: 覆盖，背景要覆盖元素的所有区域，不能有空白出现。
• 长度/百分比: 数字值

不管你相信与否，这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下 background-size的几种不同用法：

1. /* base header classes */  
2. #header {  
3.     /* header dimension! */  
4.     height: 350px;  
5.     /* additional background properties */  
6.     background-repeat: no-repeat;  
7.     background-position: center center;  
8.     /* some box shadow for good fun */  
9.     -webkit-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;  
10.     -moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;  
11.     box-shadow: rgba(0,0,0,0.20) 0 10px 10px;  
12. }  
13. /* 覆盖 cover */  
14. #header.flex {  
15.     /* size matters */  
16.     -webkit-background-size: cover;  
17.     -moz-background-size: cover;  
18.     background-size: cover;  
19. }  
20. /* 包含 contain */  
21. #header.flex {  
22.     /* size matters */  
23.     -webkit-background-size: contain;  
24.     -moz-background-size: contain;  
25.     background-size: contain;  
26. }  
27. /* flex, fun */  
28. #header.flex {  
29.     /* size matters */  
30.     -webkit-background-size: 100% auto;  
31.     -moz-background-size: 100% auto;  
32.     background-size: 100% auto;  
33. }  

Christoph在其网站上使用了最后一个例子。想看看各种值下的效果，请看看下面的演示，它是用JavaScript做成的，可以有交互动作：

background-size神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化，当有resize事件发生时，页面会出现不可预测的变化。但background-size却能根据客户端浏览器的大小自我的调整适应。background-size在火狐浏览器, Safari浏览器, 谷歌浏览器, Opera, 和 IE9+ 中都受支持。

你觉得这种技术有价值吗？会使用在你的页面上吗？