www.webdeveloper.com
Results 1 to 5 of 5

Thread: opacity

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    58

    Unhappy opacity

    i was on gmail the other day and i noticed the way the background fades when the 'label' name change option popups... i tried this with the opacity css value but it keeps fading the popup too ... pleez help.. i have uploaded the html file as a .txt extention...
    Attached Files Attached Files

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    You need to understand the CSS spec when it comes to the opacity property. The opacity rule is applied to an element and all children elements of that element. Moreover, no child element can have an opacity greater than their parent element.

    For example:
    Code:
    <div style="opacity:0.6">
      background
      <div style="opacity: 1">
         popup
      </div>
    </div>
    In the above code, the popup div will still appear faded because it's opacity cannot exceed 0.6, the lowest opacity of it's ancestor elements.

    The only way to make a child element appear more opaque than an ancestor, is to use positioning and trickery. Because there is no exception to the rule that children can have higher opacities than parents, you need to place 'children' outside of their 'parents' in the markup and then use some fancy CSS to position them as if they were children.

  3. #3
    Join Date
    Aug 2010
    Posts
    58
    i c.. thnx... so i have to create the popup in the body and create another div in the body and fade the div.. and a little bit of z-index???/

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Quote Originally Posted by brian8765 View Post
    .. and a little bit of z-index???/
    absolutely. good luck.

  5. #5
    Join Date
    Aug 2010
    Posts
    58
    thnx i got it working perfectly

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles