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?

Solution

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

Comments

[Joe Z]

It actually works and the green shows through, but the background-image disappeared.

[thgaskell]

@JoeZ try use background-color instead of background, it sounds like you're overriding the background-image property.

[Joe Z]

You got it. It was actually the sorting image being set as a background instead of the background-image. If you update your answer, I'll accept it.

[Nathan]

This does not work for me. In fact, according to caniuse.com, background: rgba is not supported in IE8 at all.

[Sir]

@Nathan You are correct i did some searching and have added it to my answer. Thanks.