IE 中的对角渐变

Question

有没有办法在 IE 中实现对角渐变？在 Chrome 中我可以做这样的事情：

body{
    background-image:-webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0%,#f00),
    color-stop(50%,#0f0),
    color-stop(100%,#00f));
}

但这在 IE 中不起作用。

Answer 1

是的，这是可能的！尽管它在其他浏览器中的效果不如真正的对角渐变。

该解决方案有两个重要方面使其发挥作用：

• 两个具有相同位置和不同 z-index 值（一个在另一个顶部/前面）和不同渐变方向（一个水平，一个垂直）
• 渐变中的透明/半透明颜色（您可以在 CSS3 透明度 + 渐变 中阅读相关内容）

只需将具有垂直渐变的 div 位于具有水平渐变的 div 后面（反之亦然，这并不重要），并确保最上面的渐变的颜色不是不透明的。

结果如下所示（Internet Explorer 8）：

和 CSS：

//left sample
.back
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
    z-index:0;
}

.front
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
    z-index:1;
}

//right sample
.diaggradientback
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}

.diaggradientfront
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}

更新：

有关此过滤器的文档确实表明可以一起应用多个过滤器。然而，事实证明，应用多个梯度过滤器会导致仅应用最后一个过滤器，因此简单地将两个过滤器应用到一层是行不通的，需要两层。

Answer 2

不幸的是，简短的答案是，不，你可以't. Microsoft 的渐变过滤器是二进制的 - 仅从左到右或从上到下。

但是，您可以使用 CSS3 PIE 来执行您想要的操作。请记住，PIE 在 IE9 中对渐变的支持有些粗略，即使 IE7 和 8 可以工作，也可能工作或不工作（请参阅 他们的论坛了解更多信息）。