background-position中百分比是如何定位的?

  backgroud-positon使用百分比的定位十分怪异,它的值实际计算值并非与容器的宽度或者高度相乘。

  background-positon中容器坐标定位与百分比定位的换算:

background-position中百分比是如何定位的?_第1张图片
a——background-position的百分比数值;
Px——容器坐标的定位位置;
Dx——容器的宽(高)度值;
dx——图片的宽(高)度值;
background-position中百分比是如何定位的?_第2张图片
换算公式:
图片的background-position在容器坐标内的水平位置 Px
用含百分比的calc()函数来表示: (100% - Po)
或者直接计算百分比: Px / (Dx - dx)









对比图
background-position中百分比是如何定位的?_第3张图片







你可能感兴趣的:(background-position中百分比是如何定位的?)