Internet explorer Internet Explorer 8中的CSS渐变

代码如下：

有没有办法让IE实现这一点？一些我还没有找到的工作？事实上，我刚刚发现这在IE10中不起作用，我以为会，从这里开始：，但我想不会

---

有什么想法吗，或者我只需要使用图像吗？

下面有IE10支持，渐变从绿色变为红色

---

下面是IE10支持，渐变从绿色变为红色

---

我相信您可能需要使用to关键字

---

尝试背景：线性渐变（向右，红色，红色40%，绿色40%，绿色）

我相信您可能需要使用to关键字

---

尝试背景：线性渐变（向右，红色，红色40%，绿色40%，绿色）

可以使用伪元素用纯色填充元素的给定部分：

#rt-header {
    width: 600px;
    z-index: 2;
    position: relative;
    background: green;
}

#rt-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: red;
    z-index: -1;
}

---

应在IE8中工作（使用netrenderer.com进行测试）。

您可以使用伪元素用纯色填充元素的给定部分：

#rt-header {
    width: 600px;
    z-index: 2;
    position: relative;
    background: green;
}

#rt-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: red;
    z-index: -1;
}

---

---

应该可以在IE8中使用（使用netrenderer.com进行测试）。

您可以尝试一个渐变生成器，如：在Chrome中工作正常。。。我直接从微软网站上获取了代码，并在上面运行了一个超级文本前缀器。。。可能发生了什么，但在Chrome或Firefox中没有显示任何错误。您的代码似乎已经过时。未修复的版本应该是“to right”而不是“left”，因为在浏览器未修复它之前，语法再次发生了更改。另外，在

-ms linear gradient

中也没有必要，因为IE9根本不理解CSS渐变，而IE10理解不固定的语法。你的问题令人困惑。你想要的是至少在IE8中工作的东西，还是仅仅在IE10中就可以了？你可以尝试一个渐变生成器，比如：在Chrome中工作很好。。。我直接从微软网站上获取了代码，并在上面运行了一个超级文本前缀器。。。可能发生了什么，但在Chrome或Firefox中没有显示任何错误。您的代码似乎已经过时。未修复的版本应该是“to right”而不是“left”，因为在浏览器未修复它之前，语法再次发生了更改。另外，在

-ms linear gradient

中也没有必要，因为IE9根本不理解CSS渐变，而IE10理解不固定的语法。你的问题令人困惑。你想要的东西至少在IE8中工作，还是仅仅在IE10中就可以了？这很有效！除了我需要一条沿中心向下的硬边线，而不是渐变线，正如我的JSFIDLE示例希望显示的那样（绿色和红色之间的硬边）。是的，这是一个很棒的工具！再次感谢！不幸的是，旧的IE过滤器根本无法在颜色和颜色停止之间创建硬边，它们只能生成最简单的2色渐变。但他们支持阿尔法透明度。此外，colorzilla的生成器也会生成冗余的

-ms线性渐变
字符串。这在IE10和现代浏览器中是可以的，但IE9及以下版本仍然呈现平滑渐变。该代码可以工作，但在IE8中除外，它提供了渐变，没有硬边。。。答案代码让我在所有版本的浏览器中都有优势。这很有效！除了我需要一条沿中心向下的硬边线，而不是渐变线，正如我的JSFIDLE示例希望显示的那样（绿色和红色之间的硬边）。是的，这是一个很棒的工具！再次感谢！不幸的是，旧的IE过滤器根本无法在颜色和颜色停止之间创建硬边，它们只能生成最简单的2色渐变。但他们支持阿尔法透明度。此外，colorzilla的生成器也会生成冗余的
-ms线性渐变
字符串。这在IE10和现代浏览器中是可以的，但IE9及以下版本仍然呈现平滑渐变。该代码可以工作，但在IE8中除外，它提供了渐变，没有硬边。。。答案代码让我在所有版本的浏览器中都有优势。这比阿里提供的解决方案更有效。虽然这两个答案可能都是正确的，但这实际上在IE8中产生了预期的结果，而Ali产生了实际的梯度。这比Ali提供的解决方案效果更好。虽然这两个答案可能都是正确的，但这实际上在IE8中产生了期望的结果，而Ali产生了实际的梯度。
#rt-header {
    width: 600px;
    z-index: 2;
    position: relative;
    background: green;
}

#rt-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: red;
    z-index: -1;
}