Written by me@grafxflow
01 Oct, 2012
0
3,543
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.
Visitors also read these Articles
25 Mar, 2010
HTML Special Characters and CSS content code
02 Aug, 2015
20 of the Best Web Font icons
Smart Search
Latest Articles
Darth Maul and Micro-Organisms: Inside George Lucas's Cancelled Star Wars Sequel Trilogy
How to Automatically Convert DVD Subtitles to SRT on Mac
The $4 Billion Divorce: Inside the Awkward, Painful Sale of Lucasfilm to Disney
The Rift That Broke the Whip: Inside Lucas, Spielberg, and Harrison Ford's 'Furious Rows' Over Indiana Jones
Breaking the Endless Loop: Why Star Wars Needs an Origin Story
Popular Tags
me@grafxflow
Founder, 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. I build lighting-fast dynamic content engines with Laravel, Winter CMS and Tailwind CSS. Thanks for stopping by!