Problems with transparency in CSS

Ok so heres the deal. I have a page I'm creating in html and css. I've got a div whose background needs to be transparent. However when I use opacity: .6; Everything in the div goes see through.

Is there any way to fix this so it works in 开发者_运维问答safari, IE, and firefox?

No, there's no real way to fix this problem (though you can in CSS3). There are two possible approaches:

1) Use a transparent png background rather than doing it with CSS (with hacks for IE6 which doesn't allow transparent pngs)

2) Use two separate divs, and use absolute positioning to position one over the top of the other. This requires knowing certain dimensions, so may not always apply, but may work in your situation.

.outer {
    position: relative
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Or whatever */
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
}

<div class="outer">
    <div class="background"></div>
    Content
</div>

Note that sometimes the height: 100% rule for .background doesn't work in IE 6, in which case you should try applying hasLayout to first .outer, and if that fails to .background as well (you can add hasLayout with the CSS rule zoom: 1 without side-effect). If neither of those works, you'll likely need an expression value for IE 6. If you need further help leave a comment.

As smerriman said, it's much simpler in browsers which support CSS3 (more specifically, rgba or hsla color values). It would be as simple as background-color: rgba(0, 0, 0, 0.6).

Just use transparent image as a background for that element. When you use opacity in css for a given element, everything in that element and including that element receives that styling. Look here:

http://jsfiddle.net/zV4BR/

you should use both

opacity in css and

filter:alpha(opacity=60);

for ie and stuff

use this method

How to give cross browser transparency to element's background only?

use Rgba instead opacity. see example here: http://jsfiddle.net/ypaTH/

you will have to set background on inner elements also.

Edit: to make rgab code for IE use this http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

it should be

opacity:0.6

beside that opacity works differently depending which web browser you use