html - 如何在我的案例中创建多种背景颜色？

Question

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

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

但不知道是什么意思。

我有这个

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

红色和黄色之间的边界是实心的，但灰色/红色边界和蓝色/黄色边界是模糊的。我怎样才能让它们都变得坚固？

谢谢

Answer 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