Results 1 to 6 of 6

Thread: Opacity.

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default Opacity.

    Hi all,

    You know how when you set a container to have 0 opacity, its child elements also become invisible regardless of their opacity setting? Is that the correct standard, or should an element be opaque when it its opacity is is 1 regardless of its parent container's opacity?

    Reason I ask:

    I'm developing an ajax app that does a lot of fading. Currently my app relies on the assumption that an element inherits its parent's opacity no matter what. There are main body and header areas which usually fade as a group, but once in a while a child or two will fade independently from the rest of the group. I want to make sure that an element with an inline opacity of 1 still fades when its parent fades (which it current does) in future browsers, too.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Looking at this code, it looks like it takes the opacity of its parent div:
    Code:
    <style type="text/css">
    #parent {
      opacity: 0.5;
      height: 400px;
      width: 400px;
      background-color: green;
    }
    #child {
      opacity: 1;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    </style>
    <div id="parent">
      <div id="child">
      </div>
    </div>
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    jlizarraga (01-19-2009)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    The opacity style property isn't yet standard in current CSS (version 2), though it almost certainly will be in a future version. Probably in 3, it is already in the working draft for CSS 3.

    So, since it is not yet documented as a standard, there is no way of being sure how it will behave.

    That said, it looks to be inherited, like visibility, which is how it behaves in those browsers that do support it.
    Last edited by jscheuer1; 01-19-2009 at 02:03 PM. Reason: Get the specifics of the applicable standard correct - Thanks Twey
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jlizarraga (01-19-2009)

  6. #4
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Thanks guys!

  7. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    It's nothing to do with the HTML standard. opacity is a CSS3 property, which standard is currently unfinished, but nevertheless certain parts of it have already gained wide support (mostly the bits that were already implemented in proprietary browser styles). It's unlikely that these parts will deviate much from the current implementations.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. The Following User Says Thank You to Twey For This Useful Post:

    jscheuer1 (01-19-2009)

  9. #6
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i also have the same problem... is there any way around this?, i want my container to be transparent while the child container stay as non transparent....

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •