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

我在使用Firefox，Google Chrome和Safari中的以下jQuery背景位置命令定位背景图像时出现问题。该代码在IE 8中正常工作。背景位置图像叠加（适用于IE，不适用于Mozilla/Chrome/Safari）

$（'＃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); }

预先感谢您的帮助，

安德鲁

来源

2010-06-13 amm229

你在做什么应该工作。无论如何，你可能想尝试一下清洁版：$（'＃divFluidBlur'）。css（'background-position'，blurPositionLeft +'px'+'30px'）;你可能想使用Firebug临时禁用或更改其他可能更流行的样式的值。

你可以提供一个在线的例子吗？

来源

2010-06-13 23:46:26

对不起，我没有地方举办一个现场的例子。我添加了一些细节，希望这有助于更好地解释问题。 -Andrew – amm229 2010-06-14 00:38:10

您是否做了X值的alert（）以查看它是否正确？ – 2010-06-14 05:22:35

是的，我实际上使用了一个文本框，以确保css属性正在更新。它正在所有浏览器中正确更新。它在IE中正确显示，但不在Firefox，Chrome或Safari中显示。 – amm229 2010-06-14 14:32:29

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

回答

相关问题