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

Question

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

Answer 1

使用图像： 你需要弄清楚的是要覆盖内容最短高度。然后，在你的图像编辑器中，创建你的渐变。由于它是线性的，因此您可以创建它为10px宽×500px高（如果500px为最短高度），并沿着x轴重复它。一旦你的形象被创建，你会然后写在你的CSS：

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

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

使用CSS3 瑞安卡萨斯指出，使用Colorzilla Gradient Editor是最简单的方法，我发现（虽然，因为你不是手工编码，你不学为好，但是这是一个不同的讨论）。实质上，您可以将两种颜色分别设置为0％和100％，确保垂直方向，然后将代码复制到body { }选择器中。

Answer 2

在梯度上使用％。在这里，你有一台发电机：http://www.colorzilla.com/gradient-editor/