Cross Browser Opacity
by Kris Khoury - February 6, 2012
For years, cross browser opacity was something that every site wanted, but CSS3 compliant opacity never worked well on all browsers (mainly IE). So when you were handed the design requiring opacity, or a client requested it, you blatantly disregard
ed the incompatibility issues with Internet Explorer and used CSS3 anyway (just admit it). Then, in hopes that some weird cosmic phenomenon would alter the universe and somehow upgrade IE, your hopes would come into fruition and everything would work out great. Much to your surprise, a simple test in IE would result in either blocks of color or some weird fading in the place where some beautiful opaque color should be. At first you hated IE and then you hated CSS3, never really acknowledging your own fault and denial.
Through the years, I’ve kept these opaque-squares handy, they are a cool piece to add to your toolbox:
Here is the snippet of CSS for your use.
.white25 {background:transparent url(images/white25.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/white25.png", sizingMethod="crop");}
.white50 {background:transparent url(images/white50.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/white50.png", sizingMethod="crop");}
.white75 {background:transparent url(images/white75.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/white75.png", sizingMethod="crop");}
/*OPAQUE BLACK**********/
.black25 {background:transparent url(images/black25.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/black25.png", sizingMethod="crop");}
.black50 {background:transparent url(images/black50.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/black50.png", sizingMethod="crop");}
.black75 {background:transparent url(images/black75.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/black75.png", sizingMethod="crop");}
/*OPAQUE GRAY**********/
.gray25 {background:transparent url(images/gray25.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/gray25.png", sizingMethod="crop");}
.gray50 {background:transparent url(images/gray50.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/gray50.png", sizingMethod="crop");}
.gray75 {background:transparent url(images/gray75.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/gray75.png", sizingMethod="crop");}
/*OPAQUE RED**********/
.red25 {background:transparent url(images/red25.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red25.png", sizingMethod="crop");}
.red50 {background:transparent url(images/red50.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red50.png", sizingMethod="crop");}
.red75 {background:transparent url(images/red75.png) center center repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/red75.png", sizingMethod="crop");}
Like all things in IE, cross your fingers, say a prayer and hope for the best. 