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

Answer 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％。

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

2 个答案: