在 x 轴上重复三种颜色的 CSS 背景？

【问题标题】：A CSS background with three colors repeated on x axis?在 x 轴上重复三种颜色的 CSS 背景？
【发布时间】：2011-09-09 16:57:30
【问题描述】：

基本上，我想模仿 repeat-x 技巧，在该技巧中，您拍摄 1 像素条形图像并在 x 轴上重复它，但使用 CSS 而不是图像。我的页眉是灰色背景，中间是蓝色（主要内容），页脚是灰色的。有没有办法让它在 CSS 中生成（灰色某些像素高，蓝色，灰色..）并且（如果可能的话，高阶）是否与浏览器的大小相关？

【问题讨论】：

#header,#footer{background:grey}#content{background:blue} 有什么问题？
听起来可以用渐变来完成，但我认为你最好的做法是数据 URIs

标签： css colors background

【解决方案1】：

这是一个使用 CSS3Pie 的 CSS3 浏览器（以及 IE9）的解决方案： http://css3pie.com/demos/gradient-patterns/

对于 IE6-8，我不相信没有图像你可以做任何事情。

【讨论】：

为什么这被否决了？这是一个很棒的演示，它可能是 OP 所追求的（尽管对单独元素的背景着色对我来说更有意义）。
一些巨魔在这里只是为了投反对票。他们有精神问题。
现在太棒了！我认为这回答了我的问题。我应该注册并给它一个加号。
一般来说，那个网站真的很棒！再次感谢！
我很高兴该链接对您有所帮助。如果您认为适合您的问题，请不要忘记将其标记为已接受。