Question

我这里有一个很长的单页网站，有6个100％的长页面。直到这里我们没有问题，扭曲是，页面应该从下到上滚动，背景图像应该与底部对齐。

Here's what I have until now.我还没有屏幕从底部开始。我正在尝试将图像放在页面底部。您可以通过示例看到图像位于屏幕的底部，而不是整个页面。

html, body {
  height:100%;
}

body{
  background: url('http://i.minus.com/iB3a7BTVPi9X.jpg') center bottom no-repeat scroll;
}


.onepage {
  height:100%
}

我知道这个问题正在发生，因为我有一个100％高度的身体和html，但是如果我把它改成最小高度，它不起作用，因为一些奇怪的原因。

谢谢！

Answer 1

如果您希望图像保留在同一位置，无论滚动，您都可以使用

background-attachment:fixed;

在具有背景的元素上，在本例中为html

顺便说一下，将背景附加到body而不是html更为常见。此外，下次在问题中包含您的相关代码

修改

如果您希望将正文的背景图像放在页面的绝对底部，则必须使用不同的方法。你不能给.onepage height:100%，因为这总计600％，因此身体不能适应所有。相反，您可以使用javascript和window.innerheight将每个部分设置为较大的页面，然后使用

html { min-height: 100%;height:auto; } body { min-height: 100%; height:auto; background: url('http://i.minus.com/iB3a7BTVPi9X.jpg') no-repeat; background-position: center bottom; }

将背景定位在页面底部

Demo

P.S。您可能对像One Page Scroll这样具有类似效果的插件感兴趣

单页网站与背景图像附加到底部

1 个答案: