css探索之旅 » web前端实验室 » CSS3 background-size

CSS3 background-size:[length|percentage|auto]{1,2}|cover|contain

浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.6 and Later, IE系列不做参考

* 用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto

所用图片：

背景图尺寸（数值表示方式）：

#background-size{
	-moz-background-size:300px 100px;
	background-size:300px 100px;
}

背景图尺寸（百分比表示方式）：

#background-size2{
	-moz-background-size:40% 80%;
	background-size:40% 80%;
}

背景图尺寸（等比扩展图片来填满元素，即cover值）：

#background-size3{
	-moz-background-size:cover;
	background-size:cover;
}

背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：

#background-size4{
	-moz-background-size:contain;
	background-size:contain;
}

背景图尺寸（以图片自身大小来填充元素，即auto值）：

#background-size5{
	-moz-background-size:auto;
	background-size:auto;
}

© Copyright Doyoe.com