background属性及其应用

background

属性：

background-size

background-origin

background-clip

background-size:

参数：

length 带有单位的数值

	percentage   百分比

	cover   覆盖整个盒子 等比放大

	contain  把整个图片完整的包裹进盒子当中 等比放大

	

background-size：100px;
当这个属性设置一个值的时候，这个值表示宽度，高度为自适应。
	Tip：当设置一个值的时候，不要错误的把高度也想象成这个值。
如果设置两个值的时候，第一个值表示宽度，第二个值表示高度。

当值设置为百分比的时候，是以父容器的宽度和高度为参考。
cover 表示不去考虑图片能不能够完整的显示，而是要把容器占满。
contain 表示不去考虑图片是否占满盒子，而是考虑图片显示完整。

300 400
宽高比3:4

	Tip:ie6-8不能够支持
	
插件:backgroundsize.min.htc

background-origin 背景位置

相关属性:

	padding-box   图片会占满padding+内容

	border-box    图片会占满border+padding+内容

	content-box  图片会占满内容区域

background-clip 背景裁切

相关属性:
	padding-box
	border-box   默认值
	content-box

多背景：

/多背景，顺序靠前，层级就高/

background: url(./images/xx1.jpg) no-repeat left top,

			url(./images/xx3.jpg) no-repeat left bottom,

			url(./images/xx4.jpg) no-repeat right top,

			url(./images/xx5.jpg) no-repeat right bottom,

			url(./images/xx2.gif) no-repeat center center;