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

Question

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

Answer 1

在渐变上使用％。这里有一个生成器：http://www.colorzilla.com/gradient-editor/

Answer 2

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

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

注意：#f6e7cf应该是渐变的整理颜色。这样做的是，如果页面高于500px，它将显示与渐变底部相同的颜色，从而给人一种幻觉，即它继续。

使用CSS3 正如Ryan Casas指出的那样，使用Colorzilla Gradient Editor是我发现的最简单的方法（尽管你也没有学习，因为你不是手工编码，但这是一个不同的讨论）。基本上，您可以将两种颜色设置为0％和100％，确保它是垂直的，并将代码复制到body { }选择器中。