Blog

01 Oct
2012

css3 Icon Logo

Making CSS alpha opacity work in all browsers


Most modern browsers can accept the CSS->opacity, but for Internet Explorer 8 or below you have to use the CSS->filter:alpha.

.opacity
{
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
}

Here is the scss @mixin.

@mixin opacity($opacity){
    $ie-value: $opacity * 100;
    opacity: $opacity;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ie-value+")";
    filter: alpha(opacity=$ie-value);
}

 Compatibility

Opacity works for Safari, Firefox, Chrome, Opera and Internet Explorer 9 and uses a value between 0.0 and 1.0.

Filter:alpha works for Internet Explorer 5, Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8 and is set using a values between 0 and 100.

One thing to note is that when using opacity/alpha on a div tag that contains text and pictures, they will also be affected with the opacity/alpha setting.

Posted in: < PHP and HTML and CSS >
me@grafxflow avatar

me@grafxflow


I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Visitors also viewed these posts


Add comment

Add comment