How to apply CSS opacity in IE7 and IE8 browsers

Topic: HTML / CSS« Prev|Next »

Answer: Use Microsoft "alpha filter" property

The CSS3 opacity property is only supported in Internet Explorer 9 and above browsers. However, Internet Explorer 8 and earlier versions supports a Microsoft-only property "alpha filter" to control the transparency of an element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>CSS Opacity for IE8 and Lower</title>
  • <style type="text/css">
  •     p {
  •         filter: alpha(opacity=50);
  •         zoom: 1;  /* Fix for IE7 */
  •         opacity: 0.5;  /* Standard Syntax */
  •     }
  • </style>
  • </head>
  • <body>
  •     <p><strong>Note:</strong> Alpha filters is Microsoft-only property to control transparency in IE8 and earlier version, however it creates invalid code in your CSS.</p>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:


Your Feedback:


We would love to hear from you! Please say something.