Làm thế nào để tạo một nền bằng cách sử dụng CSS gradient với màu phẳng?

Question

Một backgrond như thế này với cùng một chiều cao của màu đỏ và màu vàng.

Answer 1

Sử dụng ColorZilla của gradient generator, chỉ cần đặt hai màu sắc để cùng một vị trí% và bạn sẽ nhận được một lợi thế cạnh cứng giữa hai màu sắc.

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

Trình tạo gradient màu của Colorzilla là một khởi đầu tốt đẹp, nhưng mã này thật khủng khiếp theo ý kiến ​​của tôi.
Bạn sẽ không bao giờ dễ dàng nhìn thấy nếu màu sắc phù hợp, không có đầu ra của mã hex ngắn như #ff0 và - quan trọng nhất so với câu trả lời ở trên - tiêu chuẩn W3C đã thay đổi thành to <side-or-corner>.

Vì vậy, cho câu hỏi của bạn sau một gradient phẳng với cùng chiều cao của khu vực màu đỏ và màu vàng này là mã ưa thích của tôi:

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.

Cũng lưu ý rằng bạn có thể bỏ qua thuộc tính filter không được chấp nhận cho IE trong trường hợp này, đơn giản vì không có điểm dừng màu nào được bao gồm.
Nếu bạn biết chiều cao chính xác của hộp, bạn cũng có thể làm việc với các giá trị px thay vì giá trị % cho các điểm dừng màu.

Cập nhật 2016/01/16: Cả -o- nhà cung cấp tiền tố là cần thiết, cũng không -ms- (như IE 10 là trình duyệt IE đầu tiên để hỗ trợ gradient và nó hỗ trợ các tiêu chuẩn W3C cú pháp). Xem http://caniuse.com/#feat=css-gradients
Cập nhật 2016-01-27: Ưu tiên lowercase hex color values for better gzipping và nêu rõ background-color và background-image thay vì background. Cũng đã xóa to bottom vì đó là giá trị mặc định.