background-position的一个小算法

我们都知道设置background-position的值如果为百分比，那么浏览器会通过一个简单的算法来计算出图片左顶点离容器左顶点的位置(也就是图片的偏移量)

比如：background-position:50%50%，浏览器计算xy偏移量算法分别为：

x:(容器宽度-图片宽度)*50%;

y:(容器高度-图片高度)*50%;

但是我需要的一个需求是：设置了background-position:30%0之后，就将图片相对于容器偏移30%*图片的宽度(也就是将图片向左移动30%长度)：所以我得出了下面的方程式：

注：

x1：容器宽度

x2:图片宽度

-x2*30%=(x1-x2)*30%*?//(这里的百分数都是相对于图片的宽度)

（说明：30%的需求是模拟实现图片裁切，将一张图片作为div的背景，在div中再用6个div显示这一张图片，以实现图片百叶窗的效果）

通过设置未知量可以求的这个因子的值。设图片宽度为1，得到?的值为

?=1/(1-x1')//x1'为容器占图片宽度的比例

最后只需要设置background-position:"30*(1/(1-x1'))%0"

就可以实现图片偏移30%的效果，而且还是自适应的。

下面是我项目中的关于该算法的核心代码实现：

renderAreasUI : function() { //根据准备的数据构建区域ui
	var container = $(this.settings.preImg).parent().find(this.settings.ui);
	var num = this.settings.num;
	var newImgSrc = $(this.settings.newImg).attr('src');
	var position = 0;
	var distance = 100 / num; //容器宽度所占图片宽度比例
	for(var i = 0; i < num; i++) { //创建num个div分区域显示这一张图片
		position = (i*distance)*(1/(1 - (distance / 100))) + '%' + ' ' + '0';
		var area = document.createElement('div');
		$(area).addClass(this.settings.area.substring(1));
		$(area).css({
			position: 'absolute',
			top: 0,
			left: (i*distance) + '%',
			backgroundImage: 'url(' + newImgSrc + ')',
			backgroundRepeat: 'no-repeat no-repeat',
			display: 'block',
			backgroundPosition: position,
			backgroundSize: (100 * num) + '% 100%', //设置图片宽度为当前容器的num倍，目的是为了让每一个div都显示一部分
			height: '100%',
			width: distance + '%' //这里通过num设置百分比，创建num个div显示这一张图片
		});
		$(container).append($(area));
	}
}