如何使用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标准已更改为{{ 3}}。

因此，在使用相同高度的红色和黄色区域的平面渐变之后给出您的问题，这是我的首选代码：

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 */

to <side-or-corner>

另请注意，在这种情况下，您可以省略IE的弃用filter属性，因为没有包含色标。
如果您知道框的确切高度，则还可以使用px值而不是颜色停靠点的%值。

更新2016-01-16：既不需要-o-供应商前缀，也不需要-ms-（因为IE 10是第一个支持渐变的IE，它支持W3C标准语法） 。见See example on CodePen
2016-01-27更新：首选http://caniuse.com/#feat=css-gradients，明确说明background-color和background-image，而不是background。同时删除了to bottom，因为它是默认值。