欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

background-size

程序员文章站 2022-06-16 08:22:06
...

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+ 中都受支持。

转载:http://www.webhek.com/post/demo/background-size