0

我正在寻找任何替代方法来产生垂直线性渐变（两种颜色），从顶部的深色开始，到底部的浅色。

这些方法适用于 IE9 和 IE8。

碰巧，我尝试了 CSS 属性filter，但无济于事。它似乎不想在 IE9 或更低版本中工作，而且我最好还是使用不同的方法。

我已经尝试过 ColorZilla 的渐变生成器，它也提供了 SVG 方法，但我不知道从哪里开始，因为它只是一个随机的字母数字字符串，我无法理解。

请让我强调一下，我不想要任何形式的 JS/jQuery 方法或任何类型的插件，因为我试图让我的 UI 对禁用脚本的人保持友好。

我只是在寻找可以使用的任何其他 CSS 方法？

谢谢你，迪伦。


编辑

这是该问题的一个活生生的例子。面包屑当前位置的渐变不会出现在 IE9 或更低版本中。

4

3 回答 3

1

以下是 IE6-IE9 中渐变的正确 CSS。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4096ee',GradientType=0 );

没有真正的替代方案 - 这就是它的正确 CSS。

如果您遇到困难，请使用在线生成器，例如： http: //gradients.glrzad.com/ http://www.colorzilla.com/gradient-editor/

您不需要 SVG 方法，这仅适用于多级渐变。对于简单的渐变，例如您需要的（从浅到深，从上到下），那么生成器将非常适合您。

于 2013-10-14T14:47:17.410 回答
1

答案归功于@davidpauljunior。

我认为这与标签有关。如果添加 CSS 规则 display: inline-block ，渐变会显示出来。

干杯伙计们！

于 2013-10-15T07:15:40.610 回答
1

简短的回答是，尝试在 IE<=9 中进行渐变是非常痛苦的。

  • 该filter方法很糟糕（并且也有一些讨厌的错误）。

  • SVG 方法很难使用，带宽很重，而且无论如何它只处理 IE9。

您拥有的唯一明智的解决方案是：

  1. 只需接受 IE<=9 不会做渐变，并为它们提供合理的纯色后备。

  2. 扔掉所有漂亮的 CSS 渐变，改用老式的 PNG 背景图形。

  3. 吞下你的反 JS 库偏见并使用 CSS3Pie 库。

就个人而言，我会选择选项 3。您始终可以为关闭 JS 的用户提供纯色后备。

如果您真的不准备这样做，那么恐怕您唯一剩下的明智解决方案就是老式的背景图像。

于 2013-10-14T15:39:24.937 回答