CSS渐变，IE中的透明颜色如何处理？

Question

我能在IE中使用透明色与渐变吗？

我已经尝试过了。

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=transparent, endColorstr=red);

奇怪的是，即使在IE9中，这也会创建一个从蓝色到黑色的渐变。

- user984003

---

你看过 https://dev59.com/XXE95IYBdhLWcg3wft1w 吗？ - Oleg

是的。它提供了一个扩展十六进制透明度的示例，但没有解释其逻辑。所以我仍然不知道如何实现透明效果。 - user984003

Answer 1

在(start|end)ColorStr属性中没有提到支持"transparent"值。对于Internet Explorer 8及以下版本，您可以尝试以下代码：

.transparentGradient {

    /* The element needs layout */
    zoom: 1;

    filter: progid:DXImageTransform.Microsoft.gradient(
        gradientType=1, startColor=0, endColorStr=#FFFFFF
    );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(
        gradientType=1, startColor=0, endColorStr=#FFFFFF
    );
}

这里有一个工作示例，我已经在IE8、兼容模式和IE6中进行了测试。

startColor / endColor

startColor和endColor参数接受：

整数，指定或接收颜色值，可范围从0（透明）到4294967295（不透明白色）。

参见：http://msdn.microsoft.com/en-us/library/ms532929(v=vs.85).aspx

startColorStr / endColorStr

您还可以使用startColorStr或/和endColorStr，它们接受：

字符串，指定或接收的值可以范围从#FF000000到#FFFFFFFF。

因此，您可以在“#RRGGBB”（如示例中所示）或“＃AARRGGBB”格式中指定颜色，后者定义为：

颜色以＃AARRGGBB格式表示，其中AA是alpha十六进制值，RR是red十六进制值，GG是green十六进制值，BB是blue十六进制值。alpha值控制对象的不透明度。 alpha值为00时为透明，而值为FF时为不透明。

默认值为#FF0000FF（不透明蓝色），如果您传递超出范围的值，则它将返回默认值。参见：http://msdn.microsoft.com/en-us/library/ms532930(v=vs.85).aspx

---

不要忘记：

对象必须具有布局才能呈现过滤器。

参见：http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx

- Oleg

Answer 2

这个是有效的:

#000000FF

所以：

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000FF, endColorstr=red);

另外，虽未经测试，但我听说0也是可以使用的。此外，应该使用startColor而非startColorstr。

- user984003

---

如果您正在使用像LESS这样的预处理器，您可以将其转换为ARGB格式：argb(rgba(0, 0, 0, 0.1))。我们使用它编写了一个混合辅助程序，以支持IE8和9。 - Johnus