Question

以下是我所指的内容的链接：http://beckabney.com/test.html

我在使背景图像按照我喜欢的方式工作时遇到了一些麻烦。

我希望背景根据窗口的宽度自动调整大小，它已经正确地执行了。如果你缩小窗口，你会看到背景缩小了。

这是问题所在。如果你让你的窗户变宽（短），那么背景将调整大小并且变得太高，因此你不能再看到背景的顶部（因为背景是底部定位的）。 当您位于页面顶部时，我希望背景位于顶部位置，当您向下滚动时，它会慢慢移动到底部位置。类似于Android手机背景的效果你左右移动。当然，请记住，当您缩小窗口时，我仍然希望背景自动调整大小。

HTML：

<body>
    <img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />

    <div class="banner">
        <img src="http://i.imgur.com/JptsZ.jpg" alt="" />
    </div>
    <div class="content">
        <div class="innerContent">
            testing
        </div>
    </div>
</body>

CSS：

html
{
    background-color: #70d4e3;
    height: 100%;
}

body
{
    height: 100%;
}

.background
{
    margin-top: 45px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
}

.banner
{
    margin: 0px auto;
    width: 991px;
    margin-bottom: -9px;
}

.content
{
    background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
    height: 889px;
    margin: 0 auto;
    width: 869px;
}

.innerContent
{
    padding: 30px;
}

可能需要一些javascript或jquery来实现这一点。

Answer 1

嗯，这很有趣，谢谢！

我希望你不要介意我冒昧地使用百分比来让我的生活更轻松一点，而且脚本可能稍微强一些，因为我可以可靠地使用百分比浮点数。

我所做的是使布局，html和css符合bg正确动画所需的规则，它们与你所拥有的大致相同。

然后，这只是一个问题，即通过正确的属性计算所需的计算，以确定您从顶部开始的百分比，*20实际上是由背景填充的“左”空间量图像百分比（背景高度为80％）。

他们将计算移动到一个函数中，因此我可以在滚动和窗口调整大小时调用它，确保它在任何修改窗口的事件上启动...

没有进行大量测试，但它在Chrome中有效，我很累：p

我相信这就是你要找的东西：

~~http://jsfiddle.net/sg3s/RSqrw/15/见编辑2~~

如果你想要这个另一种方式，只需让页面背景从顶部开始并修改：

http://jsfiddle.net/sg3s/RSqrw/14/参见编辑2

修改

作为奖励，因为我从未真正将jquery脚本写成'插件'，所以我决定将其转换为一个。我想出的应该很容易实现和使用！

~~http://jsfiddle.net/sg3s/RSqrw/52/~~ 请参阅编辑3

~~在Chrome，Firefox 3.6，IE9 +兼容模式下成功测试了功能~~

~~编辑2：~~

再次阅读问题检查我是否做得对，我注意到我没有做你想做的事，所以我更新了第一个编辑中的链接，它给你一个插件，你可以在其中滚动背景有几个选项。它保留了我的“旧”插入，同时也做了你想做的事情......阅读代码中的注释以获得一些额外的描述。

编辑3：

今天上班的时候，我很担心我的插件“尝试”有点臃肿。正如你在评论中提到的那样，它并不符合要求。

所以我把它改写成只做你想要的东西而不是更多，在Chrome Firefox，IE9 + compat等等测试过。这个脚本更清晰。

http://jsfiddle.net/sg3s/vZxHW/

如果高度适合窗口，您可以选择将背景贴在顶部或底部。没有别的，但这已经足以做一些非常酷的事情了：p

Answer 2

一个确切的解决方案：小提琴：http://jsfiddle.net/srGHE/2/show/

查看 source

感谢您的挑战。请参阅下面的解决方案，该解决方案符合所有要求，包括推荐但可选（包括如何删除这些功能的步骤）功能。我只显示页面的更改部分，并在每个部分（CSS，HTML和JavaScript）后面进行说明：

CSS（更改）：

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
body{
    background-color: #70d4e3;  
}
#background { /*Previously: .background*/
    /*Removed: margin-top: 45px;
      No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */

CSS修订说明：

margin-top:45px是不必要的，因为你绝对定位元素。
应该通过id（#）选择器选择不太可能出现多次的所有元素。此选择器比类选择器更具体。

HTML（更改）：所有class属性都已被id取代。没有进行任何其他更改。不要忘记包含JQuery framework，因为我已经使用JQuery实现了您的愿望。

JavaScript （新）：
注意：我添加了一个您没有请求的功能，但似乎合乎逻辑。代码将自动在窗口左侧保留足够的边距，以便始终显示背景。如果您不想要此功能，请删除标记注释之间的任何内容。

$(document).ready(function(){
    //"Static" variables
    var background = $("#background");
    var marginTop = parseFloat(background.css("margin-top")) || 0;
    var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
    var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/

    function fixBG(){
        var bodyWidth = $("body").width();
        var body_bg_width_ratio = bodyWidth/1920;
        var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG

        var height = $(document).height();
        var docHeight = $(window).height();
        var difHeight = bgHeight - docHeight;
        var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;

        /*Start of automatic left-margin*/
        var arrowWidth = body_bg_width_ratio * 115; //Arrow width
        if(bodyWidth - bannerWidth > arrowWidth*2){
            $("body > div").css("margin-left", "auto");
        } else {
            $("body > #banner").css("margin-left", arrowWidth+"px");
            $("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
        }
        /*End of automatic left-margin*/

        if(difHeight > 0){
            background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
        } else {
            background.css({top:"", bottom:"0"});
        }
    }
    $(window).resize(fixBG);
    $(window).scroll(fixBG);
    fixBG();
});

JavaScript代码说明
通过计算背景和文档宽度的比率来确定背景的大小。使用width属性，因为它是最可靠的计算方法。

然后，计算视口，文档正文和背景的高度。如果适用，还会计算滚动偏移，以便在必要时准备背景的移动。

（可选），代码确定是否需要调整左边距（以保持背景在窄窗口处可见）。

最后，如果背景箭头的高度高于文档的正文，则会相应地移动背景，同时考虑滚动位置。箭头从文档的顶部开始，并在用户滚动时向上移动（当用户完全向下滚动时，箭头的底部将是页面的底部）。如果没有必要移动背景，因为它已经很适合，背景将位于页面的底部。

页面加载完成后，此功能会添加到调整大小和滚动事件中，以便背景始终位于正确的位置。

如果您有任何其他问题，请随时向他们提问。

Answer 3

好吧，我不确定我是否理解你，你为什么要这样做，但你可以尝试添加2个背景（见http://www.css3.info/preview/multiple-backgrounds/），一个带顶部bg，另一个带底部bg但我认为如果页面不太长会导致问题，那么纯CSS的另一个答案如下：首先添加3个100％宽度的水平div。顶部div将有你的顶部bg及其高度，中间div将是透明的，自动高度和底部div将具有你的底部bg及其高度。所有div都有一个0 z-index。然后创建一个更高的z-index div作为容器，你将被设置。如果我理解你的问题是正确的，那就是我能想到实现这一目标的结果。话虽这么说，我很确定你能用JQuery做到这一点，效果更好

Answer 4

使用jQuery，我能够为您提供我认为您要求的内容：

$(window).scroll(function() {
    var h = Math.max($(document).height(), $(window).height());
    var bottom = h - $(".background").height() - $(window).height();
    $(".background").css("top", (($(window).scrollTop() / h) * bottom) + "px");
});

编辑：忘记考虑scrollTop报告位置的方式。

Answer 5

或者也许：

.background {
    margin-top: 45px;
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
    max-height: 100%;

}

Answer 6

我建议使用jQuery Background Parallax http://www.stevefenton.co.uk/Content/Jquery-Background-Parallax/

这个功能就像

一样简单

$("body").backgroundparallax();

询问你是否不能让它发挥作用。

Answer 7

@abney;据我了解你的问题可能是你想要的http://jsfiddle.net/sandeep/RSqrw/60/

你只需要css：

#background {    
    position: fixed;
    width: 100%;
    height:100%;
    top: 0;
    left:0;   
    z-index: -1;
}

Answer 8

你的问题的解决方案是Scott Robin的一个很好的小插件。您可以访问他的项目页面here，获取更多信息，下载并让您的所有项目更轻松。

动态背景滚动

8 个答案:

一个确切的解决方案：小提琴：http://jsfiddle.net/srGHE/2/show/