javascript - 如何根据当前页面高度调整具有渐变图像的大小？

Question

我正在使用图像作为我网站的背景。它具有黑/白渐变，宽度为 1 像素。

CSS:

background-image:url('../image/gradient.png');

这使它重演。图片高度为2000px。

是否可以动态更改图像的高度，使其适合所有页面大小:如果页面高度小于 2000px，图像的高度应该更小，如果页面的高度更大，图像应该更大。

提前致谢

我尝试了各种浏览器内渐变技术，但它们在所有浏览器上的效果似乎并不相同。

Answer 1

我通常通过以下两种方式之一解决这个问题。

如果可以使用 CSS3，则使用 CSS 渐变(我总是发现 http://colorzilla.com/gradient-editor/ 是玩渐变的好选择)，然后可以将其设置为窗口的 100% 高度。

如果 CSS3 不是一个选项，我通常只选择一个高度，比如说 500px，然后为它做一个渐变。然后，由于渐变通常从颜色 A 变为颜色 B，只需将底层背景颜色设置为与颜色 B 匹配，渐变将在所有显示器上以类似方式工作。

假设渐变从蓝色到黑色:

body {
    /* ensure body always fills viewport */
    min-height: 100%;

    /*gradient fades to black so set underlying BG to black*/
    background: url(/path/to/gradient.gif) repeat-x #000; 
}
}