Geek Answers Handbook

Set various opacity for nested elements

I want to make an effect similar to exponent win7: the title bar has an opacity of less than 1, and the content has no transparency.

Then I tried to combine the two elements together to do this:

<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 div#outer have an opacity of 0.8, and then div#inner does not have transparency (with opacity = 1).

However, this does not seem to work. Since the opacity of div#outer will affect the opacity of div#inner .

Any ideas?

+6
source share
2 answers

However, this does not seem to work. Since the opacity of div # external will affect the opacity of div # inner.

Right.

But if you want to get only a translucent background, set the color to RGBA , as background-color will 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 information, read the MDN docs here: https://developer.mozilla.org/en-US/docs/CSS/color

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

+6
source

The inner div inherits the opacity of the container.

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

Sample code (two span elements are placed side by side within the main span, the second is a background that receives 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>
0
source

More articles:


All Articles