Problem
One common problem that many designers/developers have is setting a background only opacity, without having the opacity applied to the text.
Solution
The solution is to use rgba values in combination with the IE Gradient filter.
Detailed explanation
Using the combination of rgba color values and the IE gradient filter, it is possible to have an opacity value apply only to the background without having the opacity being applied to the text.
Now that Firefox, Safari, Opera, Chrome and IE 9 recognise values supplied in rgba this will mean that this will work in over 95% of browsers in use today. One should be aware that as IE9, (preview at time of writting) recognises both opacity and rgba values it is important to enclose any IE filters in IECC's targeted at versions lte IE8.
Example -
p {
background-color: rgba(255, 255, 0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88FFFF00', endColorstr='#88FFFF00')";
}
The IE filter start and end colors are both set to the hex equivelent of the rgba values with the first two values being the alpha values, e.g. - #FFFF00 is the color value and the 88 the alpha value, giving #88FFFF00.
For an example illustrating the problem using opacity, and the solution using rgba values with the IE gradient filter, see - http://www.pziecina.com/design/turorial_demos/background_opacity.php.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
