css背景渐变

时间:2011-06-25 10:39:24

标签: css

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

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

5 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

考虑following jsFiddle example

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

我正在使用background shorthand propertybackground-colorbackground-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 ,然后您就可以查看背景图像停止的位置和背景颜色。

答案 4 :(得分:0)

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

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