Cross-Browser Transparency via CSS
Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet:
selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}Check the code comments to see what’s doing what, and feel free to adjust the level of transparency by editing the various property values. Also, remember to replace “selector” with the target element of your choice.
By the way, I’ve got a metric tonne of juicy CSS posts scheduled for the next few months. So whatever you do, stay tuned!
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
22 responses to “Cross-Browser Transparency via CSS”
The only problem with the above mentioned hacks and tricks is that it doesn’t prevent the children within a parent element from having the transparency applied as well… in IE, that is.
I recently found a blog post that talks about preventing children from having the same transparency applied as the parent, but for some reason, it’s not working for me within IE Tester.
Here’s the link: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
@Spencer
http://www.webdevelopedia.com/better_opacity.html
@Bill Brown
Thanks, Bill. I was looking at your 2-digit prefix DD, and after reading the other article that I posted, I thought that maybe that wouldn’t work since he suggested that the differing opacity level required a unique 2-digit prefix before the 6-digit color hex value. Anyways…
In regards to the hack for Firefox 2 and Opera, is that simply a copy and paste code, or is it unique depending upon the image? I just need to know if that’s something that I can simply copy and paste for every instance.
Thanks for your help, Bill.
@Spencer
I assume you’re referring to the percentage used in the RGBa assignments, as in rgba(red,green,blue,alpha)? The alpha suffix is used to assign the transparency of the color. You can use the rgba syntax anywhere you’d use another color value: text, border-color, background-color, etc.
In terms of the FF2/Opera fallback, I’m using the data-uri scheme which means I am feeding the base64 encoded value of a tiny png which FF2/O then translate into an image. This is not a simple copy and paste unless that png is the color and transparency you need. If not, you’ll want to find or write a base64 encoder.
Is there a base64 encoder that you use, or could recommend? An online encoder would be ideal for me…
Thanks again, Bill.
@Spencer
http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/
http://www.motobit.com/util/base64-decoder-encoder.asp
http://www.google.com/#hl=en&q=base64+encode+file&aq=&aqi=&oq=&fp=e8d6ef47431c6a4a
Hope it helps.
Bill
We’ve tried many different approaches to this issue and so far this has been the best and most consistent one.
Thank you for sharing.
Thanks for the ‘short’ post explaining how to do this.
Now — assuming I am trying to create a transparent background in my container
div— is there a way to resetopacityto1for text elements, image elements, etc. within thatdiv(so they show opaque) ? Just including css to set opacity to 1 within thesedivs does not seem to work. The opacity setting in the container CSS seems to override these@FeralReason: It’s a great question, and I would kindly recommend a read through Chris Coyier’s article on the topic:
http://css-tricks.com/transparency-in-web-design/
As you will see, there are several ways to implement this often-misunderstood CSS technique.
Thank you for the advice – I wrote about you (and it) today:
http://www.ecomeg.com/2010/09/how-to-improve-your-websites-cross.html