javascript - jquery - 拉伸(stretch)背景图像以填充文档而不是窗口？

Question

我正在使用这个插件:https://github.com/srobbin/jquery-backstretch以良好的方式拉伸(stretch)背景。

所以问题是，如果文档的内容足够长而导致滚动条，那么当您滚动时，图像会保持在同一位置(看起来就像静止的背景)。您可以在他的演示中看到它:http://srobbin.com/jquery-plugins/jquery-backstretch/ (此页面使用该插件。只需滚动即可发现背景没有移动)。

我想知道是否有办法更改插件，使其不使用窗口高度或其他内容，而是使用文档高度？我看过，但没有结果。我知道在内容很长的情况下这不是一个好主意，但它仅在一个根本没有太多内容的页面上完成。实际上，唯一的问题是浏览器空间(不包括镶边)的高度是否小于 650 像素左右。

这是插件代码。据我所知，相当短且写得很好: https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

Answer 1

我曾经遇到过同样的问题，这就是我的解决方案。

$(window).resize(bg);
function bg() {
    var imgWidth = 1088, 
        imgHeight = 858,
        imgRatio = imgWidth / imgHeight,
        bgWidth = $(document).width(),
        bgHeight = bgWidth / imgRatio;

        $('body').css({backgroundPosition: 'top center'});
        if ($(document).width() < imgWidth && $(document).height() < imgHeight && $(document).height() > bgHeight) {
            $('body').css({backgroundSize: 'auto 100%'});
        } else {
            $('body').css({backgroundSize: '100% auto'});
        }
}
bg();
$('body').css({backgroundRepeat: 'repeat-x'});
$('body').css({backgroundImage: 'url("images/bg-state/bg_static2.png")'});

注意:由于代码使用了 css3 属性background-size，因此它不会在 IE 上拉伸(stretch)，您需要在代码中设置自己的图像宽度和高度。