Transparent images with CSS
Web DevelopmentI have seen style="opacity:so and so" etc in a few places, but never really took the time to look into it. But I just recently looked into it a little further and I am pretty wowed with how cool this 'little' style attribute is
Basically, we have the ability to take an image, text, (maybe other stuff that I don't know about) and change its opacity via CSS.
Opacity values range from 0 to 1. 1 being fully opaque, 0 being transparent. So I guess the comparison would go 25% Opaque = 75% Transparent.
In order for this to work in IE, I had to add filter:alpha(opacity=75) in addition to the opacity:.75 style attribute.
Examples...
Code used to create the example:
NOTE: I have not yet used this other than to create this blog post since I thought it was "awesome". I have no idea about other browser's support of this attribute.
Stay tuned.
I'd like to thany tinyMCE for attempting to pants me in front of the internet.
So, good idea to add that in just in case.
http://musetracks.instantspot.com/blog/index.cfm/2...
http://www.brainerror.net/scripts_js_blendtrans.ph...
FOR CSS3
object.opacity = 0.5;
FOR Mozila
object.MozOpacity = 0.5;
FOR Mac & Linux
object.KhtmlOpacity = 0.5;
FOR IE
object.filter = alpha(opacity=0.5);
Loading....