Forums

tomw

I am working on a site that I need to implement some CSS transparency:

http://tomwindeknecht.com/new/

I need the black wrapper to have transparency (80%), but not the antiqued paper div. Unfortnately, it seems to be applying the transparency to both, even though I only added transparency to the black wrapper.

Does anyone know of how I could fix this?

Thanks in advance,
Tom

TheDoc

Using 'opacity' will be applied to everything inside that div. You'll want to use rgba for the background color:

background: rgba(0,0,0,0.8);

dfogge

just a little tip to add on to TheDoc's solution, it's best to include a fallback for browsers that cant support rgba.

background-color: #000;
background-color: rgba(0,0,0,0.8);

if you absolutely must support the transparent background in old browsers then fallback with a png.

background: transparent url(transparentbg.png);
background: rgba(0,0,0,0.8);

cnwtx

You might also get away with this: (it's not recommended, though):

.wrapper {
opacity:0.8;
}
.wrapper * {
opacity:1.0;
}

jamy_za

Yeah, I wouldn't recommend the last one :p

I don't use .pngs for cross-browser transparency support anymore. I'd do something like this (grabbed from CSS3 Please:

.box_rgba {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.8);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000); /* IE6–IE9 */
            zoom: 1;
}

tomw

Thanks to everyone for all your help! :)

Eric

It's done cross browser like this http://www.visibilityinherit.com/code/modern-css-opacity.php

tomw

Eric - that worked the best for me!

treehouse : what would you like to learn today?

Forums

[Solved] CSS Transparency in Wrappers