CSS Opacity

More browser compatible CSS opacity code.

by hyjk2000

HTML

<div>(No Opacity)</div>
<div class="all">opacity &amp; -ms-filter &amp; filter</div>
<div class="modern">opacity</div>
<div class="ie8">-ms-filter</div>
<div class="ie6">filter</div>
<h3>Note:</h3>
<p>opacity works on modern browsers (Chrome, Firefox, IE9, etc.)</p>
<p>-ms-filter works on IE8</p>
<p>filter works on IE5.5-9</p>

CSS

div { margin:1em; padding:1em; background:#000; font: bold 14pt 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff; text-align:center }
.all {
     opacity: .5; /* for modern browsers */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* for IE8 */
     filter: alpha(opacity=50); /* for IE5-7 */
}
.modern { opacity: .5 }
.ie8 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" }
.ie6 { filter: alpha(opacity=50) }