12

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.

Freek de Bruijn
  • 3,552
  • 2
  • 22
  • 28
Mikk
  • 2,209
  • 3
  • 32
  • 44

3 Answers3

36

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thank you, but the part I was concerned with was 'Fallback for web browsers that doesn't support RGBa'. I thought maybe it still could be done via URI scheme. Maybe I worry too much about people using old browsers? – Mikk Jan 25 '11 at 10:15
  • 3
    +1 No need for those client-side base64 images... 99% of the users will get the nice opacity anyways. – kapa Jan 25 '11 at 10:18
  • Why was this downvoted, :S? Any browser which supports data URIs is already covered by this method, as far as I can see. – thirtydot Jan 25 '11 at 10:21
  • Originally you simply didn't answer the question. I see you updated the post now and so I cancel the downvote and +1. – Jakub Hampl Jan 25 '11 at 10:45
  • @Jakub Hampl: Fair enough. This post is indeed much improved since the very first version. – thirtydot Jan 25 '11 at 10:52
  • @thirtydot: I have tested the exact same RGBA-based solution but for another question, but you can see in the "Screenshots proof of results" http://stackoverflow.com/a/891366/759452 that it does not work for IE8 nor IE7. Your code seems exactly the same but you say it works for IE5.5+, is there something missing? – Adriano Feb 27 '14 at 14:00
  • @AdrienBe: I *suspect* that BrowserStack's virtual machines don't support whatever it is (DirectX?) that makes `filter`s work. I just tried your test code in genuine IE8 on a real computer and it works. If my guess is right, it's embarrassing that BrowserStack doesn't realise this (or at least have a note about it in their help section). – thirtydot Feb 27 '14 at 15:32
  • @thirtydot: How annoying! BrowserStack is supposed to provide us with the best alternative out there (for quick & easy cross-browser testing). In the doubt (yes I was) I also tested on a IE8 instance installed on a real physical machine, and it also worked! Positive side: this RGBA solution is awesome :) – Adriano Feb 27 '14 at 17:05
  • @thirtydot I created a question regarding this topic (cross-browser testing isues in front-end using browserstack), feel free to add your 2 cents ;) http://stackoverflow.com/questions/22091638/front-end-development-web-browsers-differences-when-using-browserstack – Adriano Feb 28 '14 at 09:55
0

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).

MatTheCat
  • 18,071
  • 6
  • 54
  • 69
  • Thank you for your answer. I posted an article under my question, that states there is a workaround for base64 images (have not tested it though). Also, I would not like to use pregenerated/dynamic (php+gd) png files, because my rgb and alpha valus may vary. – Mikk Jan 25 '11 at 10:11
-1

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

marta.joed
  • 366
  • 3
  • 6