隐藏的溢出不适用于固定的孩子

Question

所以，我正在尝试创建一个固定的背景，实际上它可以工作。问题出在我的页脚上，因为它是从主要设置回来的，并且随着用户滚动它会显示出来。问题是当我放置固定图像时，它主要是溢出：隐藏，但是溢出：隐藏不起作用。

这是我的概念没有图像的小提琴：http://jsfiddle.net/7q8v1vsu/

这里是固定图像：http://jsfiddle.net/L4oofkso/

最后是代码：

<div id="main">
    <div id="main-content"></div>
    <div id="main-background">
        <img src="http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg">
    </div>
</div>

<div id="footer">
    <div id="footer-inner"></div>
</div>

这是 CSS：

#main{
    position: relative;
    background: #749B35;
    margin-bottom: 70px;
    height: 800px;
    overflow: hidden;
    z-index: 10;
}


#main-background{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    z-index: 0;
}
#main-background > img{
    position: absolute;
    left: 0;
    top: 0;
    width: 1200;
    z-index: 0;
}


#footer{
    position: relative;
}
#footer-inner{
    position: fixed;
    background: #E76144;
    bottom: 0;
    width: 100%;
    height: 70px;
    z-index: 0;
}

有人知道这是否可以仅使用 CSS 来解决，或者我将不得不求助于 Javascript？

谢谢

Answer 1

如果是固定背景，为什么不使用合适的固定背景？ http://jsfiddle.net/L4oofkso/1/

#main{
    position: relative;
    background: #749B35;
    margin-bottom: 70px;
    height: 800px;
    overflow: hidden;
    z-index: 10;
    background: url("http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Answer 2

http://jsfiddle.net/7q8v1vsu/

使用background-attachment: fixed; 将为您提供所需的结果。