We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.


Posted By

j_junyent on 11/25/07


Tagged

transparent


Versions (?)


Who likes this?

8 people have marked this snippet as a favorite

jonhenshaw
SpinZ
heinz1959
vali29
basicmagic
candes
darkphotn
rouxmout


Transparent in all browsers


Published in: CSS 


URL: http://css-tricks.com/css-transparency-settings-for-all-broswers/

Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency: * opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t. * filter:alpha(opacity=50); This one you need for IE. * -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator. * -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

  1. .transparent_class {
  2. filter:alpha(opacity=50);
  3. -moz-opacity:0.5;
  4. -khtml-opacity: 0.5;
  5. opacity: 0.5;
  6. }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: nicolaspar on November 27, 2007

this code is css, not PHP.

You need to login to post a comment.