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

发布于 2024-10-07 23:28:28 字数 747 浏览 1 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坦然微笑 2024-10-14 23:28:28

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

$(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")'});

注意：它不会在 IE 上拉伸，因为代码使用了 css3 属性background-size，并且您需要在代码中设置自己的图像宽度和高度。

I once had the same problem, this was my solution.

$(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")'});

Note: It do not stretch on IE due to the code uses the css3 property background-size and you need to set your own width and height of the image in the code.

回复收藏 0 原文

两仪 2024-10-14 23:28:28

具有可滚动内容和固定背景的另一种方法是仅使用或将固定在图层上。那么你就不需要依赖 jQuery（我认为它有点重）来完成一些无需它就可以在浏览器上完成的事情。

<body background="background.png">
    <iframe src="content.html" height="600"/>
</body>

还找到了另一种使用图层的方法：

<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" />
<div style="position: static;z-index: 1; ">
    content
</div>

Another approach with scrollable content and a fixed background would be to just use an <iframe> or fixing the <img> on a layer. Then you wouldn't need to depend on jQuery (which I think is a bit heavy) for something that could be done on the browser without it.

<body background="background.png">
    <iframe src="content.html" height="600"/>
</body>

Also found another way to do it with layers:

<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" />
<div style="position: static;z-index: 1; ">
    content
</div>

回复收藏 0 原文