javascript jquery background-position-x 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9511104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery background-position-x issue
提问by user1040899
How to do background-position-x in Jquery ?
如何在 Jquery 中做 background-position-x ？
console.log($('.element').css('background-position-x'));
Outputs (an empty string)
输出 (an empty string)
console.log($('.element').css('background-position'));
Outputs 0px 0px
输出 0px 0px
What I want to do is:
我想做的是：
$(this).css('background-position-x', '-162px');
How to make it work ?
如何使它工作？
Thank you very much.
非常感谢你。
采纳答案by elclanrs
background-position-xis not standard css and is not supoprted in all browsers. Take a look at solution at Background Position animation in jQuery not working in Firefox.
background-position-x不是标准的 css，也不是所有浏览器都支持。查看jQuery中的背景位置动画在 Firefox 中不起作用的解决方案。
回答by user56reinstatemonica8
Basically you get and set .css('backgroundPosition'), which is a string with a space seperating x and y, for example 12px 14px.
基本上你得到和设置.css('backgroundPosition')，它是一个字符串，用空格分隔 x 和 y，例如12px 14px。
Tested in Firefox, Chrome/Safari, Opera, IE7, IE8:
在 Firefox、Chrome/Safari、Opera、IE7、IE8 中测试：
Get it
得到它
If you want only background-position-xfrom jQuery:
如果您只想background-position-x从 jQuery：
var bpx = $('elem').css('backgroundPosition').split(' ')[0];
If you want only background-position-yfrom jQuery:
如果您只想background-position-y从 jQuery：
var bpy = $('elem').css('backgroundPosition').split(' ')[1];
If you want both background-position-xand background-position-yfrom jQuery:
如果您同时想要background-position-x和background-position-y来自 jQuery：
var bp = $('elem').css('backgroundPosition').split(' ');
var bpx = bp[0], bpy = bp[1];
Set it
设置它
(if you need animation, see Background Position animation in jQuery not working in Firefox)
（如果您需要动画，请参阅jQuery 中的背景位置动画在 Firefox 中不起作用）
To set background-position-xonly without changing background-position-y:
background-position-x只设置而不更改background-position-y：
var bpy = $('elem').css('backgroundPosition').split(' ')[1];
$('elem').css('backgroundPosition', '-192px ' + bpy);
To change or increment background-position-xonly, based on its old value - for example, increase background-position-xby 5px:
background-position-x仅根据其旧值更改或增加- 例如，增加background-position-x5px：
(this simple example assumes it's a pixel value, and not something else like a percentage)
（这个简单的例子假设它是一个像素值，而不是像百分比这样的其他东西）
var bp = $('elem').css('backgroundPosition').split(' ');
var newBpx = (parseFloat(bp[0]) + 5) + 'px', bpy = bp[1];
$('elem').css('backgroundPosition', newBpx + ' ' + bpy );
回答by moluv00
The output of
的输出
$('elem').css('backgroundPosition');
or more specifically
或更具体地说
console($('elem').css('backgroundPosition');
sent to the console will be something like
发送到控制台将类似于
elem.backgroundPosition 50% 0%
Where both the x- and y-values are assigned. To assign the new values in Firefox, you would have to use something like
其中 x 和 y 值都被分配。要在 Firefox 中分配新值，您必须使用类似
$('elem').css('backgroundPosition','50% 50%');
More likely, if you need to set a pixel dimension then you might have something that looks like
更有可能的是，如果您需要设置像素尺寸，那么您可能会看到类似
$('elem').css('backgroundPosition','50% -100px');
Which would shift your background image up (negative y-direction) one-hundred pixels.
这会将您的背景图像向上移动（负 y 方向）一百像素。
