如何使用带有纯色的 CSS 渐变制作背景？

Question

这样的背景，红色和黄色高度相同。

Answer 1

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 年 1 月 27 日更新：更喜欢 lowercase hex color values for better gzipping，并明确声明 background-color 和 background-image 而不是 background。还删除了to bottom，因为它是默认值。

Answer 2

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