[thelist] CSS transparency question

[Shannon Hubbell]

If you set the opacity of a parent, that opacity is inherited by any child.
Your "opaque" class is already set to 100 opacity by default. It can't get
any more opaque than it is. I can think of two things you can do to
accomplish what you want.

#1 Use a 90% opacity .png as the background of your "seethrough" class. This
will be an issue with IE6, but there are ways around it.

#2 Take .opaque out of .seethrough entirely, then position .opaque over
.seethrough.

Hope that helps.

~S


On Wed, Sep 9, 2009 at 4:04 PM, Jay Turley <jayturley at gmail.com> wrote:

> Hi all-
>
> I have a design I am having trouble implementing (and sorry, no URL, so
> this
> will have to be a conceptual question). There is a toolbar which floats
> over
> an image, and the toolbar is slightly transparent, enough to reveal what is
> underneath it. The designer wants a portion of the toolbar to be opaque.
>
> The html is essentially:
>
> <div class="content">
>    <p>Image stuff resides in this area.</p>
>    <div id="toolbar" class="seethrough">
>         <div class="opaque">
>            <p>This content should be opaque.</p>
>        </div>         <div>
>            <p>This content inherits transparency.</p>
>        </div>
>    </div>
> </div>
>
> The pertinent CSS looks like:
>
> .seethrough {
>    opacity: 0.9;
>    -moz-opacity: 0.9;
>    filter: alpha(opacity=90);
> }
>
> I naively tried this:
>
> .opaque {
>     opacity: 1.0;
>    -moz-opacity: 1.0;
>    filter: alpha(opacity=100);
> }
>
> but it didn't work.
>
> Any ideas on how this can be done?
>
> Thanks!
>
> -Jay
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>