Question

据我所知，大多数背景渐变是通过创建一个像素宽的图像（例如）1000像素高，并沿x轴重复图像来实现的。

如果页面高度超过1000像素，会发生什么情况？是否有一个背景渐变，可以处理任何长度的页面？

Answer 1

通常的做法是将页面的背景颜色声明为渐变图像最底部像素的颜色。因此，当渐变结束时，至少没有硬切。

Answer 2

是的，您可以使用CSS3's support for gradients。但是，旧浏览器不支持此功能，因此您会遇到固定高度的图像。

Answer 3

添加背景位置：修复！此外，你必须声明你的页面的背景颜色是最底部像素的颜色，如Hyperboreus说。 CSS3是一个不错的选择，但兼容性可能会有所不同......

Answer 4

您可以使任意大小的背景图像跨越网页的整个高度并平稳过渡。

考虑following jsFiddle example：

body {
    background: #000 url(http://i.stack.imgur.com/PnLYK.png) repeat-x center top;
}

我正在使用background shorthand property将background-color和background-image属性指定为单个规则。

我可以轻松地编写以下规则，实现相同的效果：

body {
    background-color: #000;
    background-image: url(http://i.stack.imgur.com/PnLYK.png);
    background-repeat: repeat-x;
    background-position: center top;
}

PNG本身的尺寸仅为1 x 1,000像素（宽x高），但将容纳宽度或高度不受限制的区域。

图像的实际高度并不重要 - 而是它是与CSS背景颜色匹配的图像的底部颜色与重复相结合，使得渐变显示为永远地继续。

这项简单技巧的作用是指定图像中最底部的颜色（在我的示例中为#000）作为background-color并允许background-image水平重复X轴（repeat-x）。

因此，当背景图像结束时，背景色接管并确保平滑过渡而不会产生硬切断。

要说明此技术的工作原理，请尝试使用不同的颜色替换示例中的＃000 ，例如 #ffc ，然后您就可以查看背景图像停止的位置和背景颜色。

Answer 5

@rjb：在1000px到达png停止重复之后 - 你只会看到黑色，但它会显示为连续，因为png的最底部像素是黑色。（当然你知道这个！）所以我建议修改后台位置。所以渐变似乎永远不会结束，黑色不会跨越页面的其余部分...... 例如：

body {
    background: #000 url(http://i.stack.imgur.com/PnLYK.png) repeat-x fixed;
}

css背景渐变

5 个答案: