Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE8 gradient filter not working if a background color exists

I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.

section.rgba{
    background-color: #B4B490;
    background-color: rgba(200, 0, 104, 0.4);  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1
}

I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?

Anybody know how to fix it?

like image 532
GxXc Avatar asked Dec 22 '10 10:12

GxXc


People also ask

How do you change the background color of a linear gradient?

The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

What is a gradient fill background?

A gradient fill is a graphical effect that produces a three-dimensional color look by blending one color into another. Multiple colors can be used, where one color gradually fades and changes to the other color, such as the gradient blue to white shown below.


1 Answers

After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

Apparently, there is no need for the -ms-filter and zoom rules.

like image 171
GxXc Avatar answered Sep 16 '22 14:09

GxXc