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值的div (一个位于另一个顶部/前面)和不同的梯度方向(一个水平,一个垂直)
• 渐变中的透明/半透明颜色(您可以在CSS3 Transparency + Gradient中阅读此内容)

只需将股利与股利背后的垂直梯度水平梯度(反之亦然,这并不重要),并确保最上面的梯度的颜色是透明的.

结果如下所示(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

不幸的是，简短的答案是，不，你不能。微软的渐变过滤器是二进制的——只有从左到右或从上到下。

不过，您也许可以使用CSS3 PIE来完成您想要的操作。请记住，PIE 对 IE9 中渐变的支持有些粗略，并且可能会也可能不会，即使 IE7 和 8 可以（请参阅他们的论坛以获取更多信息）。