Question

I want to get rgba backgrounds working with all browsers. I did some searching and found out that generally there are three types of browsers out there:

1) Browsers that support rgba.

2) Internet Explorer that supports rgba via bizarre ‘-ms-filter’ thing.

3) Browsers that do not support rgba, but I could use base64 png images with ‘data URI scheme’. (Even when browser does not support URI scheme, according to this it still could be done.)

I have no problems with rgba supporting browsers, and I can get it working with IE, but problem is that I have no idea how to generate client side base64 png images for URI scheme. I really do not want to pregenerate png files, because my rgba values are not constant. I could go with dynamic png generation with php gd library, but I’d really like to do all this on client side. So I’d like to know, is there any good way out there for generating semi-transparent png images with java-script. After this I could just base64 encode them and use them with URI scheme?

Thank you.

Edit:

I want to have semi-transparent div background, while having content fully visible.

Answer 1

See this blog post for a cross browser method:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Web browser support

RGBa support is available in: Firefox
3+ Safari 2+ Opera 10

Filters in Internet Explorer are
available since Internet Explorer 5.5.

This means that this will work for
virtually everyone!

See here for an easy way to generate the colors for the IE filters.

Doing this should eliminate the need to use “base64 png images with ‘data URI scheme'”.

---

If you really, really want to generate client side .png images (I can’t see the need for it here):

Generate client-side PNG files using JavaScript. Cool idea, really:

It was once again one of those nights
where I hacked like on drugs with no
end in sight. Sure, 5 years ago you
had loved me with such a project, but
in times of HTML5 with the canvas
element it is hard to impress you. So
take it as proof of creating client
side images without canvas, SVG, or
server side rendering and AJAX
processing.

But how is this possible? Well, I’ve
implemented a client-side JavaScript
library like libpng which creates a
PNG data stream. The resulting binary
data can be appended to the data
URI-scheme using Base64 encoding.