Posted By

alvaroisorna on 05/07/08


Tagged

transparency Matthew Pennell bitesizestandardscom


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

basicmagic
jonhenshaw
rd3k
LeeRJohnson
asturi
janvdm


Easy cross-browser transparency


 / Published in: CSS
 

URL: http://bitesizestandards.com/bites/easy-cross-browser-transparency

If you've ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you've probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS.

  1. #c-transparent {
  2. opacity: 0.7;
  3. -moz-opacity: 0.7;
  4. -khtml-opacity: 0.7;
  5. /* filter: alpha(opacity=70);*/
  6. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  7. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: alvaroisorna on May 7, 2008

Robert Nyman: http://www.robertnyman.com comments: "It should be noted that opacity is supported just fine in Mozilla web browsers as well. Also, it’s better to use the filter with progid in IE for performance reasons, like this: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);"

You need to login to post a comment.