如何在我的情况下创建多种背景颜色？答案

【问题标题】：How to create multiple background color in my case?如何在我的情况下创建多种背景颜色？
【发布时间】：2014-04-18 20:36:48
【问题描述】：

我正在尝试在我的 div 中创建多个纯色背景色。

我找到了这篇文章。 Can I apply multiple background colors with CSS3?

但不确定是什么意思。

我有这个

background-image:-webkit-linear-gradient(left, grey 20%, red 30%, yellow 10%, blue 100%)

红色和黄色之间的边界是实心的，但灰色/红色边界和蓝色/黄色边界是模糊的。我怎样才能使它们全部凝固？

谢谢

【问题讨论】：

你不能，这就是渐变！使用您想要的颜色的多个 div 或 divwidth x 1px 高的图像并在页面下方重复。
那是错误的。请看我的回答。

标签： html css

【解决方案1】：

试试这个：JS Fiddle

#test {
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* Opera */ 
background-image: -o-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(.25, #6E6E6E), color-stop(.25, #F20000), color-stop(.5, #F20000), color-stop(.5, #FFFF21), color-stop(.75, #FFFF21), color-stop(.75, #1231FF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to right, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
}

在此处创建：http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html

【讨论】：

【解决方案2】：

你可以；诀窍是重复以前颜色的结束位置作为新颜色的起始位置。像这样：

    background-image:-webkit-linear-gradient(left, grey 20%, red 20%, red 30%, yellow 30%, yellow 80%, blue 80%, blue 100%)

基本上，这将灰色定义为 0-20%、红色 20%-30%、黄色 30%-80% 和蓝色 80%-100%。

【讨论】：