I'm working on a template that uses a lot of opacity due to a background video, and have a navigation bar with a fixed position. I do not want article content to be displayed in front of, or behind the bar. Instead, I'm looking to make anything that hits the bar 0% opacity (or overflow: hidden;, etc). Is there a way to do this with just CSS?

Here is the example site: http://ranndesigns.com/templates/rainforest/
I have some CSS rules that only work in chrome, but this issue should be apparent in Firefox as well.

Disclaimer: This is just a quick mock-up, so resizing can cause other issues as well.