Bits & Pixels: Cross-Browser Transparent Columns
I have seen many website designs have Cross-Browser Transparent Columns, but how do we achieve it? Transparency is an effect that, unfortunately, haven’t gotten much use during the web’s history. One of the biggest reason for this is the lack of support for PNGs with alpha channels in IE6. This is starting to change with IE7 and Firefox gaining more and more ground on Windows systems. As most web developers are aware it’s possible to use PNGs with alpha channels, but this is filled with lots of problems and doesn’t work very well when you place content on top of them.
How do we create transparent columns that can work in all browsers? What if we could use the opacity property but still have the content opaque? Bits & Pixels has presented us some clever use of CSS-positioning. By having a parent element that contains two children. One transparent background that fills the entire width and height of the parent, and one child that contains the content. We can have a transparent background while the content remains opaque.
