【CSS揭秘】案例3、灵活的背景定位

background-position

定义和用法

background-position 属性设置背景图像的起始位置。
如：background-position: right 20px bottom 10px;

详细参考

http://www.w3school.com.cn/cssref/pr_background-position.asp

---

background-origin

定义和用法background-origin 属性规定 background-position 属性相对于什么位置来定位。每个元素身上都存在三个矩形框：默认情况下，background-position是以内边距的外沿框（padding box）为准的。参数值描述padding-box背景图像相对于内边距框来定位。border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。详细参考

http://www.w3school.com.cn/cssref/pr_background-origin.asp

---

calc()

用法

用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则