CODEWITHSUNDEEP
css
ronen
ronen

Reputation: 1490

IE workaround for semi-transparent

What should be the workaround in order to show in pre-IE9 the following CSS:

background-color: hsla(182, 44%,76%,.5);

Upvotes: 0

Views: 124

Answers (3)

A1Gard
A1Gard

Reputation: 4168

for transparent element you have more way.

for IE ->

filter: alpha(opacity=40);  
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);  
/* above line works in IE6, IE7, and IE8 */  
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";  
/* above line is IE8 only */

and for all browsers:

opacity: .7;

But they are transparent all element , If you need transparent only any color for example background you must use 2 functions rgba or hsla and example for them:

support : (Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+)

#rgba {  
    background: rgba(98, 135, 167, .4);  
}

but IE9 only support it in all version of IE and all browser support css3

#hsla {  
    background: hsla(207, 38%, 47%, .4);  
}

Upvotes: 2

marcus erronius
marcus erronius

Reputation: 3693

You can use one of Microsoft's proprietary "filters" to do this:

background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FA7DBDD,endColorstr=#7FA7DBDD); 
zoom: 1;

The hex values are in ARGB order. So convert your color to a RGB Hex value, (#A7DBDD in this case) and put the opacity in front (0.5 is 7F in hex) like this: #7FA7DBDD

This would be best done, of course inside an IE specific stylesheet, perhaps using conditional comments.

Upvotes: 1

Aleksandrenko
Aleksandrenko

Reputation: 3065

Use a separate dom element with solid color and set the opacity ... it will work just fine :)

.bg { background: #000; filter: alpha(opacity=50); opacity: 0.5; }

Upvotes: 0

Related Questions