Backgrounds, Borders, and More - Jump Start CSS - page 80

transparent). Figure 3.9 displays a comparison of the logo before and after adding the opacity
property at 50% transparency.
Figure 3.9. The RecipeFinder logo with and without CSS transparency using the opacity property
Internet Explorer versions prior to version 9 don't support the opacity property, but you can
mimic the same effect using a special filter that works only in those older versions of IE. So,
if you wanted full browser support for the opacity property, you would have to do this:
.logo {
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
Don't worry about the syntax of those first two lines; you can copy and paste those from a
number of sources online. [3] The only parts of the code that you need to change are the val-
ues. On the first two lines, the 50 value represents 50 out of 100, which is equivalent to the
.5 value for the opacity property. In other words, if the opacity property was set to a
value of .34 , the code with equivalent, old-IE syntax would look like this:
.logo {
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(opacity=34)";
filter: alpha(opacity=34);
opacity: .34;
}
Fortunately, because fewer and fewer people are using older versions of Internet Explorer,
you're unlikely to need to do this very often, if ever. Also, opacity settings are a decorative