改变背景大小需要新的背景位置，任何解决方法

Changing background-size requires new background-position, any workaround?

本文关键字：背景位置任何解决方法改变更新时间：2023-09-26

我有一个1320x1320的精灵表，每个单独的图像是120x120,121个图像。我一直使用这个公式来设置背景位置，直到现在:

image[i].style.backgroundPosition = -120*i + "px " + -Math.floor(i/11)*120 + "px"

现在我接近完成我的项目，我想更新一些我做的快速修复，所以我不使用121数学。地板是加载所有的图像，所以它更容易在未来更新它们，而不必重新安排精灵表中的所有图像按字母顺序，当我添加新的。所以我使用了一个程序来为我所有的图片生成当前的css位置，例如:

.image[1]{-600px -480px;} .image[2]{-1200px -840px;} .image[3]{-1200px -720px;} .image[4]{-1200px -600px;}

，但问题是，如果我改变背景大小，它完全破坏了所有图像的位置。有一个例子，我一次加载所有图像，用户可以选择其中一张，但要一次显示121张图像，我需要缩小一点，从120x120到72x72, background-size，但新方法破坏了定位，有人能解决这个问题吗?

我看到的所有关于background-size + background-position问题的线程都是关于百分比和一些与我所拥有的完全不同的东西。

如果你只是想缩小元素你可以使用css3

  transform: scale(.5)

和对应的webkit/firefox。

对于你关于Math.floor()的第一点，我真的不觉得有什么问题。只要把初始化放到循环中，就可以了。

如果你真的想用i%11代替地板

希望这能回答你的问题。