如何从百分比转换CSS背景位置属性为像素？ [英] How do I convert a CSS background-position property from percentages into pixels?

问题描述

我为中心的背景下，现在（使用背景位置：50％50％; ），我想使用JavaScript来创建动画。但是，我希望能够以这个动画使用像素测量。有效地我想背景位置设置为类似50％+ 10px的。这是可能的使用Javascript？

I'm centering a background right now (using background-position: 50% 50%;), that I'd like to animate using Javascript. But, I want to be able to animate this using pixel measurements. Effectively I want to set the background-position to something like "50% + 10px". Is this possible using Javascript?

我都不可能通过查找背景图像的高度，并在浏览器屏幕的高度，做到这一点，做一些运算，但是这似乎是一个复杂的解决方案。

I can possibly do it by finding the height of the background image and the height of the browser screen and do some arithmetic, but this seems like a convoluted solution.

推荐答案

在未来这将有可能使用CSS3的的 钙 功能。但是，因为这不是正确的广泛现在支持，下面是一个比较实用的解决方案。

In the future this will be possible using CSS3's calc function. But since that's not widely supported right now, below is a more practical solution.

只需使用href=\"http://api.jquery.com/animate/#animation-properties\" rel=\"nofollow\">增量符号jQuery的支持这些属性的

Simply use the incremental notation jQuery supports for these properties. For example

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

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

This syntax was supported by $.animate before it was supported by $.css, but recent versions of jQuery support it in both cases.

这里是一个展示的jsfiddle它在行动。

这篇关于如何从百分比转换CSS背景位置属性为像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！