当前位置：文江博客话题详情

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

发布于 2024-11-30 15:05:14 字数 94 浏览 1 评论 0原文

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

在此处输入图像描述

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陪你搞怪i 2024-12-07 15:05:14

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

Using Colorzilla's gradient generator, just set two colors to the same % location and you'll get a hard edge between the two colors.

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

回复收藏 0 原文

攀登最高峰 2024-12-07 15:05:14

Colorzilla 的渐变生成器是一个不错的开始，但我认为代码很糟糕。
您永远不会轻易看出颜色是否正确，没有像 #ff0 这样的短十六进制代码的输出，并且 - 与上面的答案相比，最重要的是 - W3C 标准已更改为 到。

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

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 上的示例。

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

更新于 2016 年 1 月 16 日：-o- 供应商前缀不是必需的，-ms- 也不是必需的（因为 IE 10 是第一个支持渐变的 IE，并且它确实支持 W3C 标准语法）。请参阅 http://caniuse.com/#feat=css-gradients
2016 年 1 月 27 日更新：更喜欢小写十六进制颜色值以获得更好的 gzip 压缩，并且清楚状态 background-color 和 background-image 而不是 background。还删除了 tobottom，因为它是默认值。

Colorzilla's gradient generator is a nice start, but the code is awful in my opinion.
You'll never easily see if the colors are right, there's no output of short hex codes like #ff0 and – most important in comparison to the answer above – the W3C standard has changed to to <side-or-corner>.

So given your question after a flat gradient with same height of red and yellow area this is my preferred code:

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.

Also note, that you can leave out the deprecated filter property for IEs in this case, simply because there are no color stops included.
If you know the exact height of the box, you could also work with px values instead of the % values for the color stops.

Updated 2016-01-16: Neither -o- vendor prefix is necessary, nor -ms- (as IE 10 is the first IE to support gradients and it does support the W3C standards syntax). See http://caniuse.com/#feat=css-gradients
Updated 2016-01-27: Prefer lowercase hex color values for better gzipping, and clearly state background-color and background-image instead of background. Also removed to bottom as it's the default value.