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

Question

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

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

Answer 1

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

只需使用jQuery 支持这些属性的增量表示法即可。例如

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

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

这是一个 jsfiddle 演示了它的实际操作。