html - 隐藏的溢出不适用于固定子项

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;
}