#书摘 #css #前端
《CSS 世界》与众不同的background-position百分比计算方式
1. CSS中有一类属性值被称作 <position> 值，表示一种CSS数据类型、二维坐标空间，用于设置相对盒子的坐标。<position> 值支持1～4个值，可以是具体数值，也可以是百分比值，还可以是left、top、right、center和bottom等关键字。图9-5给出了经典的示意（p1）
- 如果缺省偏移关键字，则会认为是center，因此background-position:top center可以直接写成background-position:top。
- IE8浏览器最多只支持同时出现 2个值，从 IE9 开始支持同时出现 3个值或4 个值，作用是指定定位的偏移计算从哪个方位算起。
2. <position>值的百分比值有着特殊的计算公式：
《CSS 世界》与众不同的background-position百分比计算方式
1. CSS中有一类属性值被称作 <position> 值，表示一种CSS数据类型、二维坐标空间，用于设置相对盒子的坐标。<position> 值支持1～4个值，可以是具体数值，也可以是百分比值，还可以是left、top、right、center和bottom等关键字。图9-5给出了经典的示意（p1）
- 如果缺省偏移关键字，则会认为是center，因此background-position:top center可以直接写成background-position:top。
- IE8浏览器最多只支持同时出现 2个值，从 IE9 开始支持同时出现 3个值或4 个值，作用是指定定位的偏移计算从哪个方位算起。
2. <position>值的百分比值有着特殊的计算公式：
positionX = (容器的宽度 - 图片的宽度) * percentX;
positionY = (容器的高度 - 图片的高度) * percentY;