【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()函数使用标准的数学运算优先级规则