set different opacity for nested elements

Question

I want to make a win7 file exporlor-like effect: the title bar have a opacity less than 1, while the content have no opacity.

Then I tried to combine two elements together to make it:

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div>
</div>

I want to make the div#outer have a opacity of 0.8,then make the div#inner have no opacity(with opacity=1).

However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.

Any ideas?

score 8 · Accepted Answer · edited May 23 '17 at 12:01

8

However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.

Correct.

But if what you want is just a translucent background, setting RGBA color as background-color would meet the needs. Like this:

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;height:100%;"></div>
</div>

For more infomation, read MDN documents here: https://developer.mozilla.org/en-US/docs/CSS/color

For IE 7 support, I believe this(using generated background image files) is an acceptable solution.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 14 '13 at 05:30

Hvordan har du det

3,605
2
25
48

1

+1, I need to type faster. Also is good to point that opacity will affect the text as well. – Tomas Ramirez Sarduy Jan 14 '13 at 05:33
@Rox:Does this support IE7+? – hguser Jan 14 '13 at 05:36
@hguser at least not for IE 7. But since IE 7 supports png transparency, I think you can use a png with alpha channel as background image. Please follow the link I just added in the answer. – Hvordan har du det Jan 14 '13 at 05:45
@Rox:Thanks,I will have a try. – hguser Jan 14 '13 at 05:54

score 0 · Answer 2 · answered Jan 22 '13 at 18:25

The inner div will inherit the opacity of its container.

A cross-browser workaround is to avoid nested elements and use absolute positioning instead. You can see an example here where opacity is applied to the background but the text has an opacity of 1: http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010

Code sample (two span elements are placed side by side within the main span, the second one is the background that gets the opacity):

<span style="position:relative;display:inline-block;width:100%;height:100%;">
    <span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;">
    11:00 AM  Image Capture &amp; ECM Using SharePoint
    </span>
    <span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;">
    11:00 AM Image Capture &amp; ECM Using SharePoint
    </span>
</span>

set different opacity for nested elements

2 Answers2