Clever Geek Handbook

CSS gradient, transparent colors in IE?

Can I use transparent color with gradients in IE?

I tried

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

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

+3


source to share


2 answers


It works:

#000000FF

So:



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

And, not tested, but I hear 0 works. Then it starts Color, not startColorstr.

+6


source


It is not mentioned that an attribute is supported for a "transparent" value (start|end)ColorStr

. 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 tested it in IE8, its compatibility mode and IE6.

startColor / endColor

Parameters startColor

and endColor

accept:

An integer that specifies or accepts a color value, which 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 startColorStr

or / and endColorStr

, which accept:



A string that indicates or accepts a value that can range from # FF000000 to #FFFFFFFF.

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

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

The default is #FF0000FF

(opaque blue), and if you pass in an out-of-range value, it defaults to it. See: http://msdn.microsoft.com/en-us/library/ms532930(v=vs.85).aspx

Do not forget that:

The object must have a layout for the filter to render.

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

+9


source






More articles:


All Articles