Written by me@grafxflow
01 Oct, 2012
0
2,288
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);
}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.
02 Aug, 2015
25 Mar, 2010
30 Sep, 2019
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!
Follow
11 Jul, 2023
21 Jun, 2023
25 Nov, 2022
20 Sep, 2022
Views: 162,566
Views: 38,790
Views: 34,587
Views: 31,936
