jquery在多个背景上更改css背景位置答案

【问题标题】：jquery to change css background position on multiple backgroundsjquery在多个背景上更改css背景位置
【发布时间】：2012-02-19 17:48:20
【问题描述】：

我正在尝试通过 jquery 来根据分辨率更改元素的背景图像位置。代码：

var pwwidth = $(window).width();
var pwheight =  $(window).height();
var bg1posx = pwwidth - $('h1.portofolio').width();
var bg1posy = pwheight - $('.footer').height();
var bg2posx = $('.leftporto').width() - (pwwidth * 0.05);
var bg2posy = ($('h1.portofolio').height() / 2 ) + $('h1.portofolio').css('margin-top').replace('px', '');
$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');

在 CSS 中，您可以像这样更改元素的多个背景：

background-position: 100px 200px , 300px 400px;
background-position: 10% 20% , 30% 40%;

我无法将其定义为使用 jquery 进行更改，因为这不起作用

$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');

【问题讨论】：

标签： jquery css background-position background-image

【解决方案1】：

您的代码中有语法错误（字符串连接不正确）：

不好：

$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');

好：

$('#content4').css('background-position', bg1posx+'px '+bg1posy+'px, '+bg2posx+'px '+bg2posy+'px');

【讨论】：

我试过这个，它给我带来了另一个错误。它说我在 window.resize 和 document.ready 上调用的函数没有定义。一旦我注释掉该行，您纠正的错误就会消失。有什么原因吗？
能否请您也发布完整的 JS 和 HTML 代码？提供帮助会容易得多。
我应该发布我的代码作为答案，还是应该将所有内容都放到网上，不管它是否停止工作？
好吧，我的错误是其中一个字符未被识别，但它仍然只影响背景图像 1 而不是 2，因此它添加了 element.style{background-position:bg1posx bg1posy} 对于 bakcground 2，值消失了。
感谢您的帮助，因为我复制粘贴了导致我出错的语法。现在可以使用了，谢谢

【解决方案2】：

$("#your_div_id").css("background-position","-100px 0px, 0px 5px");

这将移动第一个背景（左侧 100 像素）和第二个（距顶部 5px）

我正在使用这种技术来构建滑块倒计时看看http://jsfiddle.net/UR5jC/

【讨论】：