如何将CSS背景位置属性从百分比转换为像素？

Question

我现在正在居中背景（使用background-position: 50% 50%;），我想使用Javascript来对其进行动画处理。但是，我希望能够使用像素测量单位来实现动画效果。实际上，我想将background-position设置为类似于“50% + 10px”的值。这是使用Javascript可以实现的吗？

可能可以通过找到背景图像的高度和浏览器窗口高度进行一些算术运算来实现，但这似乎是一个复杂的解决方案。

- tb11

Answer 1

在未来，使用CSS3的calc函数将成为可能。但由于目前并不广泛支持，因此以下是更实用的解决方案。

只需使用jQuery支持的增量符号即可实现这些属性。例如：

$(some-element).css({ "background-position": "+=10px" });

在$.css支持这种语法之前，它已被$.animate支持，但是jQuery的最新版本在两种情况下都支持它。

这里有一个jsfiddle演示它的效果。

- kojiro

---

我在这里唯一的问题是，我需要将50%作为参考点。我将把背景图像动画化到50% + x像素的位置，其中x = 我计算出来的某个数字。而且我会做很多次这样的操作。（我的意思是...我猜我可以只计算增量数字，但那不会像我想要的那么准确。）jQuery内部如何实现这种类型的事情？ - tb11

@EdD 我追踪到了 jQuery 的 curCSS 函数，它似乎表明它使用了 getComputedStyle。 - kojiro