背景位置图像叠加(适用于IE，不适用于Mozilla/Chrome/Safari)

Question

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

$('#element').css({ backgroundPosition：'xpx ypx‘})；

所需的效果是从屏幕右侧到左侧的连续流体流，在主页面内容后面模糊。这是使用2个流体图像实现的，一个完全清晰，一个完全模糊。当用户调整窗口大小时，jquery函数计算模糊图像(设置为背景图像)的适当位置，并编辑background positioning属性。

图像的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临时禁用或更改其他可能迭代的样式的值。

你能提供一个这个问题的在线例子吗？