Question

所以我在CSS身上有一个背景图片：

body {
    background-image: url("bg-image.jpg");
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: black;
    height: 100%;
}

这很好，除了页脚在向下滚动时重叠图像。我希望背景图像使用页脚向上滚动，仅在页脚处向上滚动（因此页脚不会切断图像的底部）。是否有可能只在CSS中执行此操作或需要JS？无论哪种方式，我该怎么做呢？

页脚css是：

#footer {
    border-top: 1px #black solid;
    width: 100%;
    height: 50px;
    padding: 5px;
    background-color: rgba(16,16,16,0.9);
    color: white;
}

Answer 1

你可以通过在身体内部设置两个独立的容器，一个用于内容，一个用于页脚。这样内容将推动页脚，他们将保持分离。

.content{
    background: url('imageUrl') center no-repeat;
    background-size: cover; // cover, contain or 100%, whichever you prefer
    background-position: fixed;
    min-height: 1000px; // demonstration purpose
}

.footer{
    height: 50px;
}

http://jsfiddle.net/vpwn8ers/

如何在页脚上方保留固定的背景图像？

1 个答案: