background-size:contain 和cover
相同点： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。
不同点：
1. 在no-repeat情况下，如果容器宽高比与图片宽高比不同，
cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；（图片不完整）
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；（图片是完整的）
2. 在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。
兼容问题：（ie7）
在css中添加：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');
参数解释：
src="图片路径"，可以是相对，也可以是绝对；
sizingMethod：“scale|crop(修剪)|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界。
*：如果设置了background-attachment:fixed;会是background-size属性失效
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
取值：
scroll:默认值，背景随页面滚动而移动，即背景和内容绑定。
设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。
注意：对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
（背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。）
local：背景图相对于元素内容固定，背景图片随滚动元素滚动
因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。
对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。
inhert:继承父元素
该属性可以应用于任何元素。
也可以为多个背景图设置background-attachment
body { background-image: url("img1.png"), url("img2.png"); background-attachment: scroll, fixed;}