change opacity for sub div

Question

i have two div one big full page and sub short div in big div in dialog i want when click dialog show show dialog whith 0.3 opacity for big and 1.0 opacity for short div . but when show dialog all div show whit 0.3 opacity . how i can set this?

code

<div id="incomedialog" style="width:100%;position:absolute;height:100%;min-height:overflow:hidden;background-color:#7F7F7F;display:none;opacity:0.4;" >
<div style="text-align:right;width:600px;position:absolute;left:0;right:0;height:470px;min-height:overflow:hidden;300px;background-color:#EEEEEE;border:2px solid #CDCDCD;border-radius:3px;color:white;margin-left:auto;margin-right:auto;top:70px;opacity:1.0;">
</div>
</div>

i set 0.3 opacity for big div and 1.0 opacity for sub div but not work .

the style rules in your code are invalid - it would be better if you didn't use inline styles - easier to maintain and easier to see when you've made mistakes — kinakuta, Nov 17 '12 at 07:55

score 1 · Answer 1 · answered Nov 17 '12 at 07:48

1

Set z-index:100; for the big div

Set z-index:101; for the inner div

answered Nov 17 '12 at 07:48

Priyank Patel

6,898
11
58
88

@behzadn Please style your divs properly. – Priyank Patel Nov 17 '12 at 08:09
whats my mistake in css style? – behzad n Nov 17 '12 at 08:13
z-index do nothing on it because the inner DIV still the child of the big DIV. So, if you give opacity to your big DIV it's effect all there children. – sandeep Nov 17 '12 at 08:18

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

Instead of opacity you can use rgba color property for this. Write like this:

#incomedialog{
    background-color:rgba(127,127,127,0.4);
}

Check this http://jsfiddle.net/Q7B9x/

Check this for more Opacity of div's background without affecting contained element in IE 8?

edited May 23 '17 at 11:43

Community

1
1

answered Nov 17 '12 at 08:21

sandeep

91,313
23
137
155

change opacity for sub div

2 Answers2