내 경우에 여러 배경색을 만드는 방법은 무엇입니까?

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%) 

기본적이 20 %에서 0 내지 20 %, -30 %, -80 옐로우 30 % % 및 청색의 80 % -100 % 인 붉은 회색을 정의한다.