Düz renkle CSS gradyanını kullanarak arka plan nasıl oluşturulur?

Question

Bunu benzer şekilde kırmızı ve sarıyla aynı yükseklikte.

Answer 1

Colorzilla en gradient generator, sadece aynı% konuma iki renk ayarlamak kullanma ve iki renk arasında sert bir avantaj elde edeceğiz.

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'nın degrade jeneratörü güzel bir başlangıçtır, ancak bu kod kötüye kullanıyorum.
Renklerin doğru olup olmadığını hiçbir zaman kolayca göremezsiniz, #ff0 gibi kısa altıgen kodlarının çıktısı yoktur ve - yukarıdaki cevaba kıyasla en önemlisi - W3C standardı to <side-or-corner> olarak değiştirilmiştir.

Yani kırmızı ve sarı alanın aynı yüksekliğinde düz bir gradyan sonra sorunuzu verilen bu benim tercih kodu:

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.

Ayrıca, bu durumda IE'ler için kullanım dışı bırakılan filter özelliğini, yalnızca renk durakları bulunmadığı için bırakabileceğinizi unutmayın.
Kutunun tam yüksekliğini biliyorsanız, renk durakları için % değerleri yerine px değerleriyle de çalışabilirsiniz. ne -o- satıcı önek gereklidir, ne de -ms- (IE 10 ilk IE olarak gradyanlar desteklemek ve W3C standartları sözdizimini destek yapar):

2016-01-16 güncellendi. http://caniuse.com/#feat=css-gradients
Güncelleştirmesi 2016-01-27: lowercase hex color values for better gzipping'u tercih edin ve ve background-image'u background yerine açıkça belirtin. Ayrıca, varsayılan değer olarak to bottom kaldırıldı.