CSS background属性的学习和思考

css的background属性十分强大，我们常用的相关属性有background-image，background-color，background-position和background-repeat这四个属性，这四个属性在CSS1就有了，所以大家用的比较多，也比较熟悉，但是还有几个属性也比较重要，可以方便大家解决不少问题

background-size

规定背景图片的尺寸

版本：CSS3

语法：background-size: length|percentage|cover|contain;

background-origin

规定背景图片的定位区域

版本：CSS3

语法：background-origin: padding-box|border-box|content-box;

background-clip

规定背景的绘制区域

语法版本：CSS3

语法：background-clip: border-box|padding-box|content-box;

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

版本：CSS1

语法：background-attachment: scroll|fixed|inherit;

总结

其实这几个属性挺有意思的，看起来挺乱，设置这设置那，但是我们从浏览器渲染时的角度去思考，就发现它们之间其实还是有联系的：

1. 通过origin确定绘制背景的参考位置
2. 通过参考位置和position来确定开始绘制背景的位置
3. 通过size和color或者image来开始绘制背景，color和image确定绘制什么，size确定绘制的尺寸
4. 通过repeat来判断是否需要在x轴或者y轴重复绘制
5. 通过clip来确定最终需要展示出来的背景，将不需要显示的部分裁剪掉
6. 最后通过attachment来设置背景是否跟着页面其余部分滚动

OK，整个背景绘制完了