如何将CSS background-position属性从百分比转换为像素?

我现在正在以背景为中心(使用background-position: 50% 50%; ),我想使用Javascript进行动画制作。 但是,我希望能够使用像素测量来制作动画。 实际上,我想将背景位置设置为“50%+ 10px”。 这可能使用Javascript吗?

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

将来,使用CSS3的calc函数可以实现这一点。 但由于现在没有得到广泛支持,下面是一个更实际的解决方案。

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

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

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

这里有一个jsfiddle,展示了它的实际效果 。