当前位置:主页 > 教程 > 网页设计 >

css3教程 CSS3的Background-size很重要
栏目分类:网页设计   发布日期:2015-09-02   浏览次数:

我说的是background-size。CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术,使得在浏览器上他的头像始终全面覆盖在

我说的是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.     height350px;  
  5.     /* additional background properties */  
  6.     background-repeatno-repeat;  
  7.     background-positioncenter center;  
  8.     /* some box shadow for good fun */  
  9.     -webkit-box-shadow: rgba(0,0,0,0.200 10px 10px;  
  10.     -moz-box-shadow: rgba(0,0,0,0.200 10px 10px;  
  11.     box-shadow: rgba(0,0,0,0.200 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-size100% auto;  
  31.     -moz-background-size100% auto;  
  32.     background-size100% auto;  
  33. }  

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

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

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

特效 教程 资源 资讯