CSS - 如何为不同高度设置渐变色背景

Question

我想为网站使用线性渐变背景色。例如渐变颜色从页眉开始到页脚结束。现在的问题是，由于不同的页面有不同的内容量，所以页面的高度也不同。那么在那种情况下我该如何设置颜色的终点呢？例如我想要从 #b68d4c 到 #f6e7cf 的渐变。

Answer 1

使用图像: 您需要确定要覆盖的内容的最短高度。然后，在您的图像编辑器中，创建您的渐变。由于它是线性的，您可以将其创建为 10px 宽 x 500px 高(如果 500px 是最短高度)并沿 x 轴重复它。创建图像后，您将在 CSS 中编写:

body {
    background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}

注意:#f6e7cf 应该是渐变的结束颜色。这样做的目的是，如果页面高于 500 像素，它将显示与渐变底部相同的颜色，给人一种它正在继续的错觉。

使用 CSS3 正如 Ryan Casas 指出的那样，使用 Colorzilla Gradient Editor是我发现的最简单的方法(虽然，你学得不好，因为你不是手工编码，但这是一个不同的讨论)。本质上，您会将两种颜色设置为 0% 和 100%，确保它是垂直的，然后将代码复制到 body { } 选择器中。