edoplaza Posted January 11, 2009 Report Share Posted January 11, 2009 (edited) Hello, I recently discovered the "opacity" property, which I find very exciting. One question here: My html is very simple: I want the container to be 50% opaque and the two other divs 100% opaque. I applied individual opacities for each div, like this: #container { filter: alpha(opacity=50) ; opacity: .5 ; background-color: #595959; margin: 0px; padding: 0px; width: 960px; height: 100%; } #leftcontent { filter: alpha(opacity=100); opacity: 1; background-color: #CCCCCC; height: 400px; width: 500px; margin-top: 20px; margin-left: 20px; margin-bottom: 20px; float: left; padding: 5px; } #rightcontent { filter: alpha(opacity=100); opacity: 1; background-color: #CCCCCC; height: 400px; width: 500px; margin-top: 20px; margin-left: 20px; margin-bottom: 20px; float: right; padding: 5px; } But it doesn't work. The two divs seem to inherit the 50% opacity property from the container. How do I assign independent opacities? Thanks, Eduardo Edited January 11, 2009 by edoplaza Quote Link to comment Share on other sites More sharing options...
lm Posted January 11, 2009 Report Share Posted January 11, 2009 however daunting it might sound, when you experiment with opacity, try to write inline styles for your "opacity" divs first( for example): This black text has 50% opacity applied and then, if possible move them into external stylesheet: Also, try this source , may be you'd get some ideas for your fix. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 11, 2009 Report Share Posted January 11, 2009 Here is your fix... http://www.visibilityinherit.com/code/css-opacity.php Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 11, 2009 Report Share Posted January 11, 2009 Elements inherit the opacity from parents and you can't go back to 100% (no opacity). However, as Eric's link describes, if the elements not having the same degree of opacity are positioned over the top with position: absolute (ie not nested within the elements with opacity) they are isolated and therefore unaffected. Quote Link to comment Share on other sites More sharing options...
edoplaza Posted January 11, 2009 Author Report Share Posted January 11, 2009 Thanks a lot for your quick answers! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.