Problems with transparency in CSS

Question

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?

Answer 1

it should be

opacity:0.6

beside that opacity works differently depending which web browser you use

Answer 2

you should use both

opacity in css and

filter:alpha(opacity=60);

for ie and stuff

Answer 3

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.

Answer 4

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/

Answer 5

.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).

Answer 6

use this method

http://stackoverflow.com/questions/2757605/how-to-give-cross-browser-transparency-to-elements-background-only/2757677#2757677

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/