如何使用CSS渐变和平面颜色制作背景？

Question

像这样的背景,具有相同的红色和黄色高度.

Answer 1

使用Colorzilla的渐变生成器,只需将两种颜色设置为相同的%位置,您将在两种颜色之间获得硬边.

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

请参阅CodePen上的示例.

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

更新2016-01-16:既不需要-o-供应商前缀,也不需要-ms-(因为IE 10是第一个支持渐变的IE,它确实支持W3C标准语法).请参阅http://caniuse.com/#feat=css-gradients
更新2016-01-27:首选小写十六进制颜色值以获得更好的gzipping,并清楚地显示状态background-color而background-image不是background.也删除,to bottom因为它是默认值.