Tuesday 7 May 2013

Opacity that acutally works in ie8 and does not take to the text into the opacity with it.


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