Question

我在使用Firefox，Google Chrome和Safari中的以下jquery background position命令定位背景图片时遇到问题。该代码在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临时禁用或更改其他可能出现的样式的值。

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

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

1 个答案: