background-size CSS属性[刚刚看到,分享给大家]
如果问是什么让所有男人都生活中恐惧中,回答是不确定。没有人表露,但好奇会害死猫。十个女人中会有九个同意这点。广告商想尽办法让我们觉得不足够,但会告诉我们还可以改进。没错,先生们….size很重要。
我说的是background-size
。CSS里的background-size
属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph
Pojer在他的网站上运用了background-size
技术,使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。下面让我们来看看神奇的background-size
属性是如何使用的。
background-size
CSS属性
这个background-size
属性有几个预定义的值,但也可以像其它size属性一样使用数字:
- contain: 包含,整个背景图都要被包含在元素内,没有超出的部分。
- cover: 覆盖,背景要覆盖元素的所有区域,不能有空白出现。
- 长度/百分比: 数字值
不管你相信与否,这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下 background-size
的几种不同用法:
/* base header classes */ #header { /* header dimension! */ height: 350px; /* additional background properties */ background-repeat: no-repeat; background-position: center center; /* some box shadow for good fun */ -webkit-box-shadow: rgba(0,0,0,0.20) 0 10px 10px; -moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px; box-shadow: rgba(0,0,0,0.20) 0 10px 10px; } /* 覆盖 cover */ #header.flex { /* size matters */ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 包含 contain */ #header.flex { /* size matters */ -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; } /* flex, fun */ #header.flex { /* size matters */ -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; }
Christoph在其网站上使用了最后一个例子。
background-size
神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化,当有resize事件发生时,页面会出现不可预测的变化。但background-size
却能根据客户端浏览器的大小自我的调整适应。background-size
在火狐浏览器,
Safari浏览器, 谷歌浏览器, Opera, 和 IE9+ 中都受支持。
你觉得这种技术有价值吗?会使用在你的页面上吗?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。