SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Opacity inheritance

    I'm all for opacity being inherited by default, but I don't understand why it's done forcefully without the possibility of breaking the inheritance.

    For instance:
    HTML Code:
    <div>
      <p>Text</p>
      <div>
         <ol>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
        </ol>
      </div>
    </div>
    If the outer DIV is given an opacity of 0.4, it will affect all its contents. If I then give, say, the OL an opacity of 0.8 it ends up having an opacity of 0.4*0.8. Do you think this is the way it should be, or should the OL's opacity of 0.8 be more opaque than the outer DIV's 0.4?

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    I see your point and have dealt with the frustration generated by CSS issues like this one.

    I could argue, though, that since the OL is a child of the DIV it is correct (from an inheritance point of view) to BEGIN at 0.4.
    Afterall, could you not apply opacity of 2.0 to the OL; achieving and ultimate 0.8?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by Raffles
    I'm all for opacity being inherited by default,
    Actually the specs show that opacity isn't inherited at all in the normal sense. What happens when opacity is applied is that the element and its children are drawn onto the page then opacity is applied as whole to that "image". This is why you can't suddenly apply opacity to an inner element because its background will already be opaque and therefore appying more opacity at that stage will just increase the opacity.

    As the range is 0 - 100 you can't apply any values greater than this to return the inner element to its normal opacity. I agree with you that it would be a good idea to do this but the way that it has been designed does not allow for this.

    Unless you are using IE of course

    In IE you can set the inner element to have position:relative and the opacity of that element returns to 100&#37;.


    Code:
    .outer{
        background:red;
        opacity:0.4;
      filter: alpha(opacity=50);
        width:100%
    }
    ol {
        background:red;
        width:100%;
        position:relative
    }
    You have to restate the background colour of course for the inner element because backgrounds are not inherited and just adding position:relative would do nothing to the background unless you add one.

    In short if you want inner elements not to be opaque then you would need to use transparent pngs in background images to achieve this effect.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT
    I could argue, though, that since the OL is a child of the DIV it is correct (from an inheritance point of view) to BEGIN at 0.4.
    Yes, that does make sense, that's what I meant by inheritance.
    Afterall, could you not apply opacity of 2.0 to the OL; achieving and ultimate 0.8?
    I suppose that could work... 200&#37; of the current inherited value, as long as the result is not more than 100% of what the "outer" possible opacity level is.

    Quote Originally Posted by Paul
    In IE you can set the inner element to have position:relative and the opacity of that element returns to 100%.
    That sounds more like a bug! Though potentially a useful "feature" of IE's.

    That's interesting about how opacity works, being applied to the "image" after it's drawn rather than to the elements in a more DOM-like fashion. Thanks for that tidbit, Paul.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    That sounds more like a bug! Though potentially a useful "feature" of IE's.
    Well most of Ie's behaviour is buggy and whether or not they meant it to happen is another question.


    Quote Originally Posted by raffles
    I suppose that could work... 200&#37; of the current inherited value, as long as the result is not more than 100% of what the "outer" possible opacity level is.
    No that cannot work as the only values allowed for opacity are 0 - 100. As the child element has already in effect been rendered with its opacity set at whatever level then 100% will refer to the current level for this element which in effect means no change.


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
  •