固定的背景，无论浏览器的位置(说明图片包括！)

Question

如果可能的话，我更愿意在HTML/CSS/JS中这样做，但如果不是，任何事情都会发生。

我试图设置网页的背景，使其有一种绝对的位置，不管浏览器窗口在屏幕上的位置还是大小。

需要澄清的图片：

​

​

(图片说明:红色轮廓是浏览器窗口，浅蓝透明图片是图片应该具有的位置和大小)

Answer 1

您可以使用window.screenX和window.screenY获取窗口的屏幕位置。然后，您可以通过一个简单的间隔计时器来跟踪它：

setInterval(function() {
  $('body').css('backgroundPosition',
              -window.screenX + 'px ' + -window.screenY + 'px');
}, 50);

(它使用jQuery，但没有必要。)

这里有一个jsbin来演示。 --它有点不稳定，但它可能会按目前的情况加热客户机，这样我就不会运行得太快了。问题是，虽然浏览器将告诉您有关窗口大小的更改(“调整大小”事件)，但它不会通过事件告诉您正在移动的窗口。

这里有一个更有效率的版本，没有jQuery，还有一些检查，以避免触摸样式时，窗口还没有移动。这似乎不会让火狐或Chrome太疯狂甚至每15毫秒运行一次：

(function() {
  var sx = window.screenX, sy = window.screenY;

  setInterval(function() {
    if (window.screenX !== sx || window.screenY !== sy)
      document.body.style.backgroundPosition = 
         -(sx = window.screenX) + 'px ' + -(sy = window.screenY) + 'px';
  }, 15);
})()