Question

我正在使用stellar.js将视差效果应用于背景图像。背景图像周围的容器高度由javascript设置为窗口高度减去标题的高度。我将背景图像设置为覆盖在css中，并希望它填充容器而不管屏幕大小。这没有视差效果，但是一旦我应用了视差效果，定位就会改变，所以当容器很高时，图像不会填满它。

我和Stellar.js的创造者Mark Dalgleish谈过，看他是否有任何想法，他说背景图片必须高于容器才能填充它，这几乎就是我的结论来过。所以我想知道是否有不同的方法可以实现这一目标。有没有人有任何想法？

这是我试图让它工作的网站。如果您通过从侧面拉入浏览器窗口并重新加载页面来调整其大小，您将看到我的意思。图像下面有一个间隙。 http://sonomarinwebdesign.com/agnitio

Answer 1

我不太确定这是否有用，但尝试的是添加在页面调整大小时运行的javascript：

$(function() {
    $(window).resize(function() {
       // replace "100" with whatever makes it the best height:
       var newHeight = ($(window).height() - 100);
       var pictureHeight = 823;
       if (newHeight > pictureHeight) newHeight = pictureHeight;
       $(".an-yee-tsee-o.parallax.panel-pane").height(newHeight + "px");
    });
});

这里的要点是，您需要在调整窗口大小时调整视差背景面板的大小。即使这不太正确，希望它能让你走上正轨。祝你好运！

注意 - 我试图修复网站在“短”屏幕上加载时的外观，然后调整浏览器的大小。对于你没有填充背景的问题，你可以在一个工具中缩放背景图像，例如gimp用于更大的屏幕（或者从更大的图像开始）。

编辑 - 添加了代码以确保div永远不会比图片大。您也可以在加载时运行相同的代码。它可能看起来不像最初的预期，但它至少应该起作用。

Answer 2

我终于通过使用skrollr.js而不是stellar.js解决了这个问题，然后在css中将背景图像设置为“background-attachment：fixed”。脚本产生类似的效果，但scrollr.js从顶部偏移量开始为0，因此它不会在图像下方留下间隙。

填充容器的视差背景图像

2 个答案: