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

Question

我在Firefox，Google Chrome和Safari中使用以下jquery背景位置命令定位背景图片时遇到问题。 该代码在IE 8中可以正常工作。

$（'＃element'）。css（{backgroundPosition：'xpx ypx'}）;

所需的效果是从屏幕的右侧到左侧的连续的流体流，在主页面内容后面时模糊不清。 这可以使用2个流体图像来实现，其中一个完全清晰，另一个完全模糊。 当用户调整窗口大小时，jQuery函数会计算模糊图像（设置为背景图像）的适当位置，并编辑backgroundposition css属性。

图像的x位置是根据窗口大小动态计算的，而y位置是静态的。 css似乎已正确修改（请注意最右边文本框中的背景位置显示）。 但是，我尝试覆盖的背景图像在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); }

在此先感谢您的帮助，

安德鲁

Answer 1

您正在做的事情应该起作用。 无论如何，您可能想尝试一个更干净的版本：$（'＃divFluidBlur'）。css（'background-position'，blurPositionLeft +'px'+'30px'）; 而且，您可能想使用Firebug暂时禁用或更改可能正在迭代的其他样式的值。

您能否提供有关该问题的在线示例？