如何获得填满整个页面的网站中的渐变背景

Question

我希望将渐变作为背景图像，如此

我怎样才能实现

编辑： 我想向下延伸到底部，但是如果我重复它，那么我看到顶部条形增益，我希望黑暗部分保持在底部并且中心部分扩展

Answer 1

http://gradients.glrzad.com/

OR

http://www.w3schools.com/css/css_background.asp

Answer 2

如果真的非常需要使用背景图片here is an example来实现这一点。 当然它无处不在 - 你需要JS polyfill来使不支持background-size属性的浏览器感到高兴。我会为此推荐jQuery Backstretch。

但是，你真正想做的事情（至少我希望如此）是让它尽可能灵活，因此，你应该看一下this或this CSS渐变教程而不是图像。当然，您可以使用CSS渐变生成器之一，如：

• http://gradients.glrzad.com/
• http://www.colorzilla.com/gradient-editor/
• http://css3please.com/。这个对CSS3很有用。

Answer 3

我会使用页面顶部的div或其他元素来为您提供“条形图”，并使用渐变背景图像，附加到css中的主体，与底部对齐并重复。

body{
background:url(yoururl.png) repeat-x bottom;
}

body{ background:url(yoururl.png) repeat-x bottom; }

对于'bar'，请使用以下CSS来获得相同的样式效果......

.topbar{
position:relative;
top:0px;
left:0px;
height:30px; /* or whatever height you want */
}

将您的颜色和边框应用于条形图，但您认为合适。