Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security

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 = Web Developer. Book Author. Secretly Important.
SAC Pro: Unlimited chats.

22 responses to “Cross-Browser Transparency via CSS”

  1. Avatar photo
    Spencer Barfuss 2010/01/18 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: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

  2. Avatar photo
    Spencer Barfuss 2010/01/18 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. Avatar photo
    Bill Brown 2010/01/18 10:21 am

    @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. Avatar photo
    Spencer Barfuss 2010/01/18 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 2010/01/25 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. Avatar photo
    FeralReason 2010/06/22 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. Avatar photo
    Jeff Starr 2010/06/29 1:59 am

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

  8. Avatar photo

    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

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
DIY: Monitor File Changes via Cron working perfectly for over a decade.
Mastodon social is a trip. Glad I found it.
As a strict rule, I never use cache plugins on any of my sites. They cause more problems than they solve, imho. Just not worth it.
Currently on a posting spree :)
6 must come before 7.
My top three favorite-to-write coding languages: CSS, PHP, JavaScript.
If you’re not 100% sure that you can trust something, you can’t.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.