CSS child elements getting transparent from parents
The Problem
If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:
- Using CSS and opacity [which has been my preferred method up to now]
- Creating a 24-bit PNG background image
The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which is not the result one normally wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess and on a big site can become mind boggling.
The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.
The Solution!
I came across an alternative: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:
.csselement{
/* Fallback for web browsers that doesn't support RGBa */ background: rgb(44, 44, 44); /* RGBa with 0.6 opacity */ background: rgba(44, 44, 44, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b22c2c2c, endColorstr=#b22c2c2c); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b22c2c2c, endColorstr=#b22c2c2c)";
}
This is the actual code used to make the areas on this site transparent.
