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

【问题标题】：Background position image overlay (Works in IE, not in Mozilla/Chrome/Safari)背景位置图像叠加（适用于 IE，不适用于 Mozilla/Chrome/Safari）
【发布时间】：2010-06-13 21:42:08
【问题描述】：

我在 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); }

提前感谢您的帮助，

安德鲁

【问题讨论】：

标签： javascript jquery firefox css google-chrome

【解决方案1】：

你正在做的应该工作。无论如何，您可能想尝试更简洁的版本： $('#divFluidBlur').css('background-position', blurPositionLeft + 'px' + '30px');并且您可能希望使用 Firebug 临时禁用或更改可能会出现迭代的其他样式的值。

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

【讨论】：

抱歉，我没有地方可以举办现场示例。我添加了一些细节，希望这将有助于更好地解释这个问题。 -安德鲁
你是否对 X 的值进行了 alert() 以查看它是否正确？
是的，我实际上使用了一个文本框来确保正在更新 css 属性。它正在所有浏览器中正确更新。它在 IE 中正确显示，但在 firefox、chrome 或 safari 中显示不正确。