rgba is well-covered in all modern browsers, and can be achieved in all IEs with a combo of a filter for IE6/7 and -ms-filter for IE8.

The filter approach is a little bit tricky because it uses the Gradient filter, which requires your RGBa colors to be passed as converted as ARGB colors, which means rgba(123,123,123,.5) needs to be #7F7B7B7B (yes, there are 8 digits, as in: #AARRGGBB)… Luckily, Kilian Valkhof has created an RGBa-to-ARGB converter for you!

I have also found a solution that uses PHP to create a PNG image that can be repeated as a background-image. Slick, but more work than I could be bothered testing, so… give it a go if you want!

The Options

• Internet Explorer Filter

  Pros:

  • Pure, valid CSS, no JS, no HTC, no tricks, no hacks!
  • IE8 offers vendor prefix (-ms).
  • IE6/7 use non-proprietary filter, so can easily put that into IE-only stylesheet.
  • Easy to target specific browser versions if using HTML5 Boilerplate <head> conditional comments.

  Cons:

  • Having to convert RGBa to ARGB? That’s a pretty big “con” to me, even with the converter…
  • filter is invalid, so stylesheets will not validate, if you care about that.
  • At least one more line of CSS for each feature…

The Bottom-Line

I was completely ready to give this to eCSStender, because the filter has to convert the RGBa, but eCSStender completely destroyed the text inside the box… So, I guess we’re back to filters… At least there’s a converter, right?