This page looks like a complete mess, but it serves a geniune purpose. I recently learned that Firefox now supported the opacity element of CSS 3. This was too cool not to test, so I threw together a quick display. I had long ago attempted to create a page with transparent backgrounds, but as you can probably tell from the screenshot below, it did not work out. At all. Seriously, it looked terrible.
This current test is a restructuring of that page. True to predictions, the opacity selector works fine in both Firefox and Opera. As expected, IE does not show it at all, instead displaying the solid color background for the divs. One problem I ran into was that the opacity selector makes everything in the div transparent: text, borders, everything.
Due to this effect, I have to fudge the design a bit in order to make everything look good. I end up creating two divs for each element on the page: 2 for the nav links and 2 for the title box. The first div for each includes all the content and has an opacity of 1.0. The second div placed after the first includes the background color and an opacity of .7. I then use relative postioning to pull the two divs in line with eachother, and z-index to make them stack right.
Sounds simple enough? There is a bit of a drawback. With relative positioning, the items are just moved from their original position on the page, and that original position is still factored in. You may have noticed the scrollbar for this page extends considerably far down, even though there is no content beneath this box. This is because all the elements of this page are supposed to be farther down on the page, and the scrollbar reads that.
Opacity would be great if it was a bit more limited. Something like a selector:
background-image-opacity:x.x
would be very awesome indeed, and would solve all these positioning problems. I now need to look and see if the W3C invented that tag yet.