Latest TweetsDisplay recent #WordPress posts on a static page:…
Perishable Press

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!

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
22 responses
  1. Spencer Barfuss January 18, 2010 @ 9:59 am

    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:

  2. Spencer Barfuss January 18, 2010 @ 10:15 am

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

  3. @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.

  4. Spencer Barfuss January 18, 2010 @ 10:33 am

    Is there a base64 encoder that you use, or could recommend? An online encoder would be ideal for me…

    Thanks again, Bill.

  5. SohoInteractive January 25, 2010 @ 8:01 am

    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.

  6. FeralReason June 22, 2010 @ 9:09 am

    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 reset opacity to 1 for text elements, image elements, etc. within that div (so they show opaque) ? Just including css to set opacity to 1 within these divs does not seem to work. The opacity setting in the container CSS seems to override these

  7. Jeff Starr

    @FeralReason: It’s a great question, and I would kindly recommend a read through Chris Coyier’s article on the topic:

    As you will see, there are several ways to implement this often-misunderstood CSS technique.

  8. Thank you for the advice – I wrote about you (and it) today:

[ Comments are closed for this post ]