CODEWITHSUNDEEP
htmlcssz-indexopacity
Liam Macmillan
Liam Macmillan

Reputation: 398

z-index and opacity issues

I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.

Any ideas how to fix this?

You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)

Upvotes: 11

Views: 22060

Answers (5)

user2742371
user2742371

Reputation:

Use instead of:

opacity: 0.6;

this:

background: rgba(255, 255, 255, 0.6);

The color is in RGB and the last digits are for the transparency level.

Upvotes: 16

ThermalCube
ThermalCube

Reputation: 168

You could even do it with opacity. Here's an example:

HTML

<div id="wrapper"> 
    <div id="contentOrWhatever">
    </div>
</div>

CSS

body {
    z-index:0;
}
#wrapper {
    z-index:1;
    opacity:0.6;
}
#contentOrWhatever {
    z-index:99;
    opacity:1;
}

So #wrapper ist now transparent and is ALWAYS behind #contentOrWhatever. Hope I could help you.

Upvotes: -1

Tymek
Tymek

Reputation: 3113

You should use transparent background, instead of opacity. Background-image is the best way if you want to support IE8. (CSS3 Colours: http://caniuse.com/#search=rgba)

Use data-uri for better performance.

Upvotes: 0

bookcasey
bookcasey

Reputation: 40483

Opacity is inherited. If the parent is see through, so are the children.

A better way to do this is to remove opacity and set the background color to be transparent:

.foo {
  background: rgba(0,0,0,.5);
}

Upvotes: 0

ScottE
ScottE

Reputation: 21630

You'll need to position your transparent div absolutely.

http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.

Upvotes: 3

Related Questions