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

【问题标题】：CSS - How to set gradient color background for different heightsCSS - 如何为不同的高度设置渐变颜色背景
【发布时间】：2012-01-23 22:09:47
【问题描述】：

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

【问题讨论】：

你使用的是css3 graients，还是图片？
我想用图片，但如果不能用图片，我可以用css3。

标签： css colors background gradient

【解决方案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 { } 选择器中。

【讨论】：

【解决方案2】：

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

【讨论】：

此解决方案具有图像回退功能。它还提供了浏览器范围的兼容性。我将它用于我的项目。 ;)