CSS3 그래디언트의 백분율 % 기호가 명확하지 않습니다.

Question

CSS3 그래디언트 (Link)에 대해 공부하고 있습니다. 다음 구문을 이해할 수 없습니다.

/* Firefox 3.6 to 15 */ 
    background: -moz-linear-gradient(red, yellow 10%, green 20%); 

% 기호는 무엇을 말합니까? 그들의 범위는 무엇입니까? 2 백분위 값 (녹색 20 %)이 항상 첫 번째 백분율 값 (노란색 %)보다 커야합니까? 그리고 붉은 색으로 백분율 기호가없는 이유는 무엇입니까?

Answer 1

여기서 백분율 기호는를 사용하여 배경색을 채 웁니다. 당신이 구문이있는 경우,

background: -moz-linear-gradient(red, yellow 10%, green 20%); 

그것은 첫째 빨간색으로 시작되었는지 보여 주며 지금 노란색 10 %를 추가 전체 배경의 1/10이 될 것입니다 경우 때 배경이 빨간색 빨간색은 빨간색으로 의미 커버 할 수있는 비율은 10 %이고 나머지 90 %는 노란색입니다. 그린 20 %를 추가하면 노란색과 빨간색이 20 %로, 다른 80 %가 녹색으로 표시되고 20 %가 실제로 두 부분으로 나뉩니다 노란색의 10 %를 정의하고 빨간색은 자동으로 다른 10 %로 설정합니다.

Answer 2

백분율은 해당 색상에 대한 그라데이션 점을 알려줍니다. 노란색을 50 %로 변경하면 50 % 지점에서 빨간색에서 노란색으로 그라디언트가 적용됩니다. 백분율 값을 빨간색으로 지정하면 해당 백분율 값까지 빨간색이 시작되지 않고 시작은 최종 그라디언트 색의 솔리드가됩니다. 세 번째 그라데이션 색상 비율이 두 번째보다 작 으면 표시되지 않습니다. 총 값이 100 % 미만이면 100 %가 계산 될 때까지 해당 그라디언트 패턴을 반복합니다.