background

1 css3中出现的特性:

• Multiple background多背景
• background-size
• background-orign背景的初始定位盒子
• backgound-clip背景剪切盒子

2 关于back-gound的几个注意点

1> 以下的几个在ie9上兼容

• background-size
• background-orign背景的初始定位盒子 padding-box
• backgound-clip背景剪切盒子 border-box
• backgound-image
• backgound-position:0% 0%
• backgound-repeat:repeat
• backgound-attachment:scroll
• backgound-color:transparent

2> background-image在隐藏元素的加载情况

display:none的时候，ie依然会请求图片的 firefox不会，chrome如果本元素隐藏但是有backround-image，依然会加载image的，但是如果是父元素有display:none的情况，就不会进行加载了

3> base64渲染图片性能并不高，适合尺寸比较小的图片

如果需要实现鼠标光标经过图片颜色变换的效果，务必使用一张图片这种用户体验会好很多

4> backgound-position

1、缺省值是center
2、posiiton的百分比计算规则（这里的position只针对于background-position）
positionX = (容器的宽度-图片的宽度) *percentX;
positionY = (容器的高度-图片的高度)* percetnY;
当容器小于图片的大小的时候，两个相减就会变成负数

5> backgound-color永远在最底下

利用这个特性，可以实现 在：active的时候，不用每个元素都替代了，而是用background-image来实现覆盖原来的背景色