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