logo标签列表

CSS3跨浏览器渐变背景，包括rgb/rgba和备选方案。

cssgradientrgbrgba
3

我想尝试使用rgb值在各种浏览器中实现跨浏览器渐变效果，并在浏览器不支持时提供回退选项。

jsFiddle示例：http://jsfiddle.net/HelloJoe/hUxdh/

我相信我已经涵盖了大多数浏览器，但我有几个问题：

  1. 是否有其他常用的浏览器被我忽略了？对于iPad /智能手机等设备，需要哪些属性？或者它们会从当前使用的某个属性进行渲染？

  2. 如果偶然情况下未呈现渐变，则仅使用原始的background: rgb(50, 50, 50);生成纯色是否足够？

  3. 使用filter值时，我无法使用rgb值使其正常工作，不得不使用hex值，虽然这不是一个巨大的问题，但我只想使用rgb值。是否有解决方法或它根本不接受它们？

  4. 如果我使用rgba而不是rgb，那么我是否需要具有rgba渐变背景值，一个rgb渐变背景值作为回退以防未呈现alpha透明度和一个纯色背景回退以防未呈现任何渐变？或者浏览器会忽略alpha透明度值，并仅显示来自rgba的rgb而不需要单独的rgb背景回退？

  5. 作为所有内容的最终回退，是否需要在CSS属性的开头设置一个固定的hex值？我想添加一个hex值没有害处，但使用rgb的想法是，如果rgba可用，则可以快速轻松地更改整个站点的颜色。因此，如果我需要编辑所有hex值，那么具有回退hex值将使使用rgb/rgba无意义。

我已经做了一些搜索，示例各不相同，不同人之间的理解也存在误解，我只是试图创建一个准确的工作示例以获得所需的结果。

1个回答
6
这绝对是一个很棒的生成器，非常感谢Simon！然而仍有一些问题需要解决，例如如果浏览器不支持读取rgba，它会只读取rgb值并忽略alpha透明度吗？另外，在必要时是否需要hex值作为最终备选方案？ - no.
@JoeMottershaw 我对Colorzilla的Ultimate渐变编辑器的喜爱无法用语言来衡量，所以(+1)，但如果你想使用其他东西，比如圆角和阴影，我会推荐http://www.css3pie.com - 请注意，该网站本身就是一个演示，展示了其中的阴影和圆角效果。 - Joonas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接