Hi Ivonne, you are talking about the iframe content here, not the overlay surrounding the content, correct?
An interesting idea :) so I started with some rough CSS (I'm using Automattics' own Custom CSS plugin) to get it done. Here are my observations:
To overwrite the FancyBox default white background you need to call #fancybox-outer. I found that setting transparency for that layer works but it has some results you need to take into account. I only tested in Opera and Chrome so I don't know about FF let alone what it does in IE but here goes...
This CSS rule will cause not only the background but the complete content wrapped by FancyBox become semi-transparent. This includes images and flash movies plus any other iframe content (depending on browser? and except PDFs):
You can see this in action on http://test.4visions.nl/easy-fancybox-sandbox (will leave the CSS running for a couple of days, try the iFrame Link in the menu and any other image or link in post content to see the results)
Alternatively, you can use CSS3 to handle it differently. The following code only targets the layers own background and leaves the rest of the FancyBox content alone. So the final result depends on the content and it's own CSS:
So if you are loading content that is opaque (like an image) or has an opaque background like html with a background color, you won't see any difference, but when loading content that is transparent or has transparent backgrounds you should see your page through it... But certainly no guarantees for IE here !
Hope you can do something with these hints. If you can come up with a more elegant solution, please let me know :)