background-position的一个小算法

最新推荐文章于 2022-02-14 14:58:11 发布

z736732419

最新推荐文章于 2022-02-14 14:58:11 发布

阅读量136

点赞数 1

CC 4.0 BY-SA版权

文章标签：算法 background-position

本文链接：https://blog.youkuaiyun.com/z736732419/article/details/84769092

本文介绍了一种自适应背景偏移算法，该算法能够使背景图片相对于容器按指定比例偏移，实现了图片裁切效果，并通过实例展示了如何利用该算法实现图片百叶窗效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们都知道设置background-position的值如果为百分比，那么浏览器会通过一个简单的算法来计算出图片左顶点离容器左顶点的位置(也就是图片的偏移量)
比如：background-position: 50% 50%，浏览器计算x y偏移量算法分别为：
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));
	}
}