평면 색상의 CSS 그래디언트를 사용하여 배경을 만드는 방법은 무엇입니까?

Question

붉은 색과 노란색의 높이가 같은 백 그라운드.

Answer 1

는 Colorzilla의 gradient generator, 그냥 같은 % 위치에 두 개의 색상을 설정하여 당신은 두 색상 간의 하드 가장자리를 얻을 것이다.

background: #ffff00; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */ 

Answer 2

Colorzilla의 그라디언트 생성기는 좋은 시작이지만 코드는 제 의견으로는 끔찍합니다.
색상이 맞는지 쉽게 알 수 없으며 #ff0과 같은 짧은 16 진수 코드가 출력되지 않으며 위의 답변과 비교하여 가장 중요합니다. W3C 표준이 to <side-or-corner>으로 변경되었습니다.

그래서 빨간색과 노란색 영역의 같은 높이 플랫 그라데이션 후 귀하의 질문에 대해,이 내 선호하는 코드입니다

background-color: #ff0; /* Old browsers */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff0), color-stop(50%, #ff0), color-stop(50%, #fe0000)); /* Chrome, Safari4+ */ 
background-image: -webkit-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Chrome10+, Safari5.1+ */  
background-image: -moz-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Fx3.6+ */ 
background-image:   linear-gradient(  #ff0 50%, #ff0 50%, #fe0000 50%); /* W3C */ 

See example on CodePen.

또한이 경우 색상 정지가 없기 때문에 IE의 경우 더 이상 사용되지 않는 filter 속성을 생략 할 수 있습니다.
정확한 높이를 알고있는 경우 % 값 대신에 px 값으로 작업 할 수도 있습니다. 어느 -o- 벤더 프리픽스가 필요 없으며 -ms- (IE (10)가 제 IE 같이 구배를 지원하고는 W3C의 표준 신택스지지 않음)을 :

는 2016년 1월 16일 업데이트. http://caniuse.com/#feat=css-gradients
업데이트 됨 2016-01-27 : lowercase hex color values for better gzipping으로 변경하고 background-color 및 background-image 대신 background을 명확하게 지정하십시오. 기본값 인대로 to bottom도 삭제되었습니다.