Opacity in decimal, then Hex

If you’ve ever set CSS background colors to semi-transparent, you’ve had to make the cross-browser compatible. Here’s the basic code:

  background: rgba(0, 0, 0, 0.8);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc0E212A, endColorstr=#cc0E212A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc0E212A, endColorstr=#cc0E212A)";

The first line is for all the modern browsers, the next three for MSIE varients (IE7, IE8, etc). Important to note – don’t have a solid color declaration or it will override the filters in IE.

Also, and most annoying, the IE opacity is in HEX, not decimal. (That’s the first two digits of the #cc0E212A string). It’s oddly difficult to find cheat sheets, so here’s one:

10% = 19
20% = 33
30% = 4c
40% = 66
50% = 80
60% = 99
70% = b2
80% = cc
90% = e6

Mostly, this is for my own reference.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.