Question

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

这是一个没有图像的概念：http://jsfiddle.net/7q8v1vsu/

最后是代码：

<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;将为您提供所需的结果。

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

2 个答案: