css渐变背景长页面

Question

我的html背景图片上有css页面，从顶部的蓝色到底部的白色。

然而，图像400x800和页面要长得多，所以重复一遍。

页面长度始终不断变化。

是否可以解决这个问题，以便背景延伸到页面长度？或者maye使它不重复并使背景变白并且图像在顶部？

如果是，请问怎么样？

Answer 1

最简单的方法是将图像设置为不重复，然后将背景颜色设置为与渐变的一端相同：

body {
    background: white url('yourImage') repeat-x top left;
}

获得一个渐变来拉伸以适应窗口是可行的，但更多的工作，需要一些JavaScript。

Answer 2

我知道有jQuery / Javascript方法可以实现这个目标：

Resizable Backgrounds with jQuery

Stretch background image - jQuery - Demo

但除了诉诸类似的解决方案之外 - 你可以：

• 选择重复背景的图案（纹理等）
• 创建一个非常长的背景图片，可以处理您页面的大多数导航 会处理。

Answer 3

另一种方法是使两端的渐变相同，最大色差为50％。