像这样的背景与红色和黄色相同的高度。如何使用平坦颜色的CSS渐变制作背景?
回答
使用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 */
这似乎不适用于Chrome中的大高度。 http://codepen.io/codecarson/pen/umesI – manafire
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 */
另外请注意,在这种情况下,您可以省略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
,因为它是默认值。
- 1. 颜色渐变的背景
- 2. 仅使用CSS水平制作背景颜色重复使用
- 3. 如何停止重复自身的背景颜色渐变? (css)
- 4. 用颜色制作颜色渐变:
- 5. CSS渐变背景颜色不工作,变成灰色的表头
- 6. IE11渐变颜色在背景
- 7. 在背景颜色上应用渐变CSS
- 8. 如何制作背景渐变
- 9. 用颜色渐变更改背景颜色
- 10. CSS渐变背景不缩放,以一种颜色结束
- 11. Android:使用seekbar逐渐改变多个imageview背景的颜色
- 12. 为uibutton背景图像设置渐变颜色(颜色)iphone sdk
- 13. 将导航栏颜色混合到背景颜色(渐变?)
- 14. 如何改变背景颜色和背景颜色?
- 15. 使用CSS渐变背景滚动
- 16. CSS:悬停改变的背景 - 颜色
- 17. 如何让背景逐渐变色?
- 18. R:ggplot背景渐变着色
- 19. CSS:背景颜色的背景图像
- 20. CSS背景渐变验证
- 21. CSS HTML背景渐变
- 22. css垂直渐变背景
- 23. CSS过渡背景渐变
- 24. CSS渐变到纯背景
- 25. iOS UITableView:使用CAGradientLayer将背景颜色设置为渐变
- 26. LibGdx平滑背景颜色变化
- 27. 使背景颜色变浅
- 28. 如何在svg背景中创建渐变颜色
- 29. 如何渐变颜色添加到背景DIV
- 30. div的CSS背景颜色
查看示例[此处](http://compass-style.org/examples/compass/css3/gradient/) –