Coffeehouse Thread

3 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

Transparency

Back to Forum: Coffeehouse
  • User profile image
    W3bbo

    At first, this was going to be a thread about getting a 75% transparent container whilst getting the children to be 100%. But I just hit another snag:

    I tried this in IE:

    <style type="text/css">
    body { background: #FFF; }
    #panel { background: #000; text-align: center; position: relative; filter: alpha(opacity=25); }
    #panel span { background: #CCC; opacity: 1.00 !important; }
    </style>
    </head>
    <body>

    <div id="panel">
    <span>Hello</span>
    </div>

    </body>
    </html>
    But IE renders "panel" as having a black background and no transparency.

    But I did something similar on another page, and it rendered that fine. So what's wrong?

    Oh, and back to the original question:

    How do I get an element to be 75% Transparent (25% Opacity), but I want its children and #text node to have 100% Opacity (as in: totally solid).

    Anyone know how to do this?

  • User profile image
    Sven Groot

    From the way I read the docs, neither the filter attribute (at least not like that) nor the opacity attribute are supported by IE.

  • User profile image
    Maurits

    filter requires a height or a width...
    http://msdn.microsoft.com/workshop/author/filter/filters.asp
    "Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply, having layout means that an object has a defined height and width. Some objects, like form controls, have layout by default. All other filterable objects gain layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true."

    The IE opacity is cumulative to its children - so the opacity of an element is the product of it's own opacity and the opacities of all containing elements.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.