Jak utworzyć w moim przypadku wiele kolorów tła? - html, css

Próbuję utworzyć wiele jednolitych kolorów tła w moim div.

Znalazłem ten post. Czy mogę zastosować wiele kolorów tła z CSS3?

ale nie jestem pewien, co to znaczy.

Mam to

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

Granica między czerwonym a żółtym jest stała, ale szara / czerwona granica i niebiesko-żółta granica są rozmyte. Jak zrobić je wszystkie solidnymi?

Dzięki

Odpowiedzi:

Spróbuj tego: 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%);
}

Utworzono tutaj: http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Możesz; sztuczka polega na powtórzeniu pozycji końcowej poprzedniego koloru jako pozycji wyjściowej dla nowego koloru. Tak jak:

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

Zasadniczo określa to szary jako od 0-20%, czerwony od 20% -30%, żółty 30% -80% i niebieski 80% -100%.