Recently a project I did for a client required some partial transparent objects. Specifically, it was a photograph background, with a partially transparent white area for the content. Similar to this:
In Firefox, this is a simple task. There are a few ways to accomplish this, but the way I chose to use was this:
Now, the big problem here is (naturally) Internet Explorer, and it’s complete lack of support for the rgba approach. What do you get in IE? Nothing. You get no background displaying at all.
Another option for IE is to just make the element transparent using this:
But the problem with this solution is it makes the child elements transparent as well, even if they have the opacity set to 100.
My first solution involved some crazy filters I found from searching the Internet about the problem that allowed me to set the background transparency, but I couldn’t get them to reliably work across all versions of IE. I’m not saying this solution isn’t possible, it just wasn’t playing nice with me at the time.
After a lot more research, and a few more hours playing around with solutions, I ultimately came across a solution by Lea Verou that involved a mixture of RGBA and a 1px by 1px alpha transparent PNG that was generated using a pretty slick PHP script. However, after spending some time playing with the PHP script by Lea, I discovered a strange phenomenon in IE7. The alpha transparency was getting changed in a gradient like pattern in IE as it repeated the image. Here’s a screenshot showing the problem:
I know it’s hard to see, but that’s the only screenshot I grabbed before fixing the problem.
This was unique to IE7. IE8 and IE9 both displayed the background perfectly.
I spent a considerable amount of time trying to debug this, and eventually discovered it to be a problem with another CSS layer (that was the be a “shadow” for a lightbox element). Even though the layer was hidden, it was throwing off IE. But back to the point..
In the end of the day I fell back to using the PHP script by Lea Verou, or at least the principal. It didn’t seem to be producing a file as small as it should have been, and since I only needed this one PNG file, I actually just made my own PNG image, but the principal is still there.
So what does this mean?
It means that Alpha Transparent PNGs are still the way to go to accomplish a translucent background, even in this “modern” browser time. IE just doesn’t keep up.
background: url('http://mydomain.com/rgba.php?r=255&g=255&b=255&a=50') repeat; background: rgba(255,255,255,0.5) repeat;
If you choose to make your own PNG instead of using the PNG generated by the rgba.php script, just change the URL on the first line to point directly to your generated PNG file.