3

Can I use transparent color with gradients in IE?

I've tried

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

Oddly, this creates a gradient from blue to black, even in IE9.

user984003
  • 28,050
  • 64
  • 189
  • 285
  • Have you looked at http://stackoverflow.com/questions/2293910/css3-transparency-gradient – Oleg Feb 02 '13 at 15:53
  • Yes. It gives an example of an extended hex for opacity, but doesn't explain the logic. So I still don't know how to get transparent. – user984003 Feb 02 '13 at 15:56

2 Answers2

9

There's no mention for "transparent" value being supported by (start|end)ColorStr attribute. For Internet Explorer 8 and below you can try the following code:

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

Here's a working example. I have tested it in IE8, its compatibility mode, and in IE6.

startColor / endColor

The startColor and endColor parameters accept:

Integer that specifies or receives the color value that can range from 0 (transparent) to 4294967295 (opaque white).

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

startColorStr / endColorStr

You can also use a startColorStr or/and endColorStr which accept:

String that specifies or receives a value that can range from #FF000000 to #FFFFFFFF.

So you can specify the colors in "#RRGGBB" (as in the example) or "#AARRGGBB" formats, the latter being defined as:

Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.

The default value is #FF0000FF (opaque blue) and if you pass a value that is out of range then it defaults to it. See: http://msdn.microsoft.com/en-us/library/ms532930(v=vs.85).aspx

Don't forget that:

An object must have layout for the filter to render.

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

Oleg
  • 9,341
  • 2
  • 43
  • 58
6

This works:

#000000FF

so:

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

And, not tested, but I hear that 0 works as well. Then it's startColor, not startColorstr.

user984003
  • 28,050
  • 64
  • 189
  • 285
  • 2
    And if you're using a pre-processor such as LESS you can convert to ARGB format: argb(rgba(0, 0, 0, 0.1)) . We used this to write a mix-in helper for supporting IE8 & 9. – Johnus May 07 '15 at 03:23