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

【问题标题】：How do I convert a CSS background-position property from percentages into pixels?如何将 CSS 背景位置属性从百分比转换为像素？
【发布时间】：2012-08-20 20:06:25
【问题描述】：

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

我可以通过找到背景图像的高度和浏览器屏幕的高度并做一些算术来做到这一点，但这似乎是一个复杂的解决方案。

【问题讨论】：

标签： javascript jquery css background background-image

【解决方案1】：

将来，这将可以使用 CSS3 的 calc 函数。但由于目前还没有得到广泛支持，下面是一个更实用的解决方案。

只需将incremental notation jQuery supports 用于这些属性。例如

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

此语法在 $.css 支持之前由 $.animate 支持，但最近的 jQuery 版本在这两种情况下都支持它。

Here's a jsfiddle demonstrating it in action.

【讨论】：

我这里唯一的问题是我需要 50% 作为参考点。我会将背景图像设置为 50% + x 像素的位置，其中 x = 我计算的某个数字。我会这样做很多次。（我的意思是......我想我可以只计算增量数，但这不会像我想要的那样准确。）jQuery 如何在内部实现这种事情？
@EdD 我追踪到了 jQuery 的 curCSS function，这似乎表明它使用了 getComputedStyle。