背景位置圖像疊加層（適用於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暫時禁用或更改可能正在迭代的其他樣式的值。

您能否提供有關該問題的在線示例？