When using css (opacity) to set the transparency of an element, the child elements inherit the transparency of the parent element.
For example, if you set 50% transparency to the body element, the whole pages becomes 50% transparent. Even if you explicitly set the opacity to 1 for the child elements, the transparency is still there.This is particularly not desired if your child elements has text. As you can see from the screenshots, the text looks clear in Screenshot 1. In Screenshot 2, the text dissolves into the background when opacity is set to 0.5. I used opacity 0.5 just to demonstrate this. The text looks better with opacity 0.9, but this is not the ideal solution.
Solution
To prevent this, the only way is to use a png with the desired alpha transparency.
Note:
Transparent pngs are not supported by IE 6. So make sure that you use the fix mentioned at TwinHelix
Comments (0)
Leave a comment...