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值的div（一个位于另一个顶部/前面）和不同的渐变方向（一个水平，一个垂直）
渐变中的透明/半透明颜色（您可以在CSS3 Transparency + Gradient）

只需将具有垂直渐变的div放置在div后面的水平渐变（反之亦然，它并不重要），并确保最顶部渐变的颜色不是不透明的。

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

several rows of divs (purple vertical backdrop, alternating red/blue horizontal forground) Larger sample

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');
}

<强>更新：

此过滤器上的documention确实表示可以同时应用多个过滤器。但是，事实证明，应用多个渐变过滤器会导致仅应用最后一个过滤器，因此只需将两个过滤器应用于一个图层就不起作用，并且是两个层。

Answer 2

简而言之，简短的回答是no, you can't. Microsoft的渐变过滤器是二进制的 - 只是从左到右或从上到下。

但是，您可以使用CSS3 PIE来执行您想要的操作。请记住，PIE对IE9中渐变的支持虽然有些粗略，但是可能会也可能不会起作用，即使IE7和8也是如此（有关更多信息，请参阅their forums）。

Answer 3

我发现了这些有趣的文章，也许如果你阅读它们并与它们有点困惑，你可能会成功：）

IE中的对角渐变

3 个答案: