Javascript 背景位置图像叠加（适用于IE，不适用于Mozilla/Chrome/Safari）

我在Firefox、Google Chrome和Safari中使用以下jquery后台位置命令定位背景图像时遇到问题。该代码在IE8中正常工作

$'element'.css{backgroundPosition:'xpx ypx'}

理想的效果是从屏幕右侧到左侧的连续流体流，在主页内容后面模糊。这是通过使用两个流体图像实现的，一个完全清晰，一个完全模糊。当用户调整窗口大小时，jquery函数将计算模糊图像集作为背景图像的适当位置，并编辑backgroundposition css属性

图像的x位置是根据窗口大小动态计算的，y位置是静态的。css似乎已正确修改。请注意最右侧文本框中的backgroundposition显示。但是，我试图覆盖的背景图像在mozilla/chrome/safari中不存在。请参见下面的jscript代码：

 $(window).resize(function () {
    // image positioning variables 
     var windowwidth = $(window).width();
     var imgwidth = $('#imgFluid').width();
     var offset = $('#divFluidBlur').offset();

     // calculate and implement position
     blurPositionLeft = (windowwidth - imgwidth) - offset.left;
     $('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });

    // debug: display actual css Background Position of element to text box
     $("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition); }

提前感谢您的帮助

---

安德鲁

你所做的应该有用。无论如何，您可能想尝试一个更简洁的版本：$'divFluidBlur'.css'background-position'，blurPositionLeft+'px'+'30px'；您可能希望使用Firebug临时禁用或更改其他可能是iterfering的样式的值

---

你能提供一个关于这个问题的在线示例吗？

很抱歉，我没有地方来主持一个现场示例。我添加了一些细节，希望这将有助于更好地解释这个问题-AndrewId您是否对X的值发出警报以查看其是否正确？是的，我实际上使用了一个文本框来确保css属性正在更新。它正在所有浏览器中正确更新。它在IE中显示正确，但在firefox、chrome或safari中显示不正确。