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.
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
You can easily make a transparent web page using the opacity property in HTML. You simply need to adjust the opacity value between 0.0 to 1.0 where a low value represents high transparency and a high value represents low transparency.
input[type=text] { background: transparent; border: none; } background-color:rgba(0,0,0,0);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With