如何使用平坦颜色的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这样的短十六进制代码输出 - 与上述答案相比，最重要的是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值而不是用于色块的%值。

更新2016年1月16日：既不-o-厂商前缀是必要的，也不-ms-（如IE 10是第一IE以支持梯度和它支持的W3C标准语法）。见http://caniuse.com/#feat=css-gradients
更新2016-01-27：更喜欢lowercase hex color values for better gzipping，并且清楚地指出background-color和background-image而不是background。也删除了to bottom，因为它是默认值。