How would I achieve ‘background: rgba(0, 0, 0, 0.5)’ in IE?
Here is a quick tutorial on what you would do if you wanted a black background with a 50% alpha transparency value.First multiply 255 by that 0.5
So 255 * 0.5 = 127.5
Round that up or down. I rounded it off to 127.
Now go to a website that converts decimal to hexadecimal. (It should be 7f if you used 127)
The value you would use for the ‘startColorStr’ and the ‘endColorStr’ would be #7f000000.
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#7f000000,endColorStr=#7f000000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";
http://css-plus.com/2010/04/ie-opacity-with-css/
http://css-tricks.com/rgba-browser-support/
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
</style>
<![endif]-->
UPDATE: As pointed out by a few folks, the alpha value
should be the two digits at the start of the string not the end, so I've updated
the code above to be correct. (e.g. startColorstr=#50990000 not
startColorstr=#99000050)ANOTHER UPDATE: We're past the point in time where you probably never need to use filter gradients again. But nonetheless, apparently the first two digits ("50" above) isn't 50%. You have to use "hexadecimal". As written to me by Julio Loayza:
rgba(255, 255, 255, 0.5) wouldn't be equivalent to (startColorstr=#50FFFFFF,endColorstr=#50FFFFFF)
rgba(255, 255, 255, 0.5) would be equivalent to (startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)
00 is transparent and FF opaque.
this is the code that finally worked with abit of editing from the above code:
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#4f000000,endColorStr=#4f000000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4f000000,endColorstr=#4f000000)";
background-color: rgba(0, 0, 0, 0.3); - for firefox
where the number four is what alters the opacity.
No comments:
Post a Comment