Easy cross-browser transparency

/ Published in: CSS
Save to your folder(s)

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.

Copy this code and paste it in your HTML
  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. }

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

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.