Cross browser rgba transparent background while keeping content (text & images) non-transparent

12
votes

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.

3
javascriptcsscross-browserrgba
are you trying to have opacity or partial transparency? – Shadow Wizard Wearing Mask V2
css3pie might be the only answer. This is a JS library, yes it's annoying but so far I have not seen any proof of the MS filter properties working on IE8 or below. – Adrien Be

3 Answers

36
votes

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.

0
votes

I think browsers which don't support rgba don't support base64 neither. However you can simply use a 2x2 px semi-transparent png background image (not 1x1 to avoid a weird bug with IE).

-1
votes

You can use transparency all the way back to pre-Webkit Safari, IE5, Firefox .9... So old no one uses it. http://css-tricks.com/css-transparency-settings-for-all-broswers/

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

Of course you can set these css properties on individual elements via your favorite Javascript libraries or by-hand. So as your fallback, set your RBG normally then add the appropriate transparency