Transparent Background color in IE8

Question

There is a <tr> with a background-color (green) and some <td>s override the row's background with its own (gradient). Most cells, however, have a background image (sorting arrows) for part of the cell along with a transparent background color. That's what I'm dealing with now.

All works fine in browsers except IE8. It shows those cells with a white background. When I open F12 Developer Tools and uncheck the background-color: transparent property, the green from the <tr> shows, like it should.

I cannot use the transparent image hack since we need background-color for the sorting arrows.

How to get the <tr>'s green background to show through to the cells in IE8?

Answer 1

Try something like this:

background: rgba(200, 54, 54, 0.5);

The first three numbers are the red, green and blue values for your background colour, and the fourth is the alpha channel.

The alpha channel works the same way as the opacity value.

For IE 8 which seems to not support rgba you will need a opacity attribute this below should be more cross browser friendly:

.transparent {

/* works for IE 5+. */
filter:alpha(opacity=30); 

/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3; 

/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3; 

/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
opacity: 0.3; 
}