[thelist] CSS transparency question

[Barney Carroll]

All the contents of seethrough will appear 90% opaque according to these
styles. You're telling one of the children to appear completely opaque, but
it already is by default (and so is its sibling) — they're just inside a
slightly transparent container.

What you need to do is:

.seethrough * {
   opacity: 0.9;
   -moz-opacity: 0.9;
   filter: alpha(opacity=90);
}

.seethrough * *,
.opaque {
    opacity: 1.0;
   -moz-opacity: 1.0;
   filter: alpha(opacity=100);
}

This will give the transparent properties to all the immediate children of
the container, with the second rule meaning that all the
further descendants, and anything with the opaque class applied, will keep
full opacity. No need to change the HTML using this method.

Barney Carroll

barney.carroll at gmail.com
07594 506 381


2009/9/10 Jenni Beard <jenni at theweblotus.com>

> Can you upload at least a screenshot to better illustrate what you're
> doing?
>
> Jenni
>
> -----Original Message-----
> From: thelist-bounces at lists.evolt.org
> [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Jay Turley
> Sent: Wednesday, September 09, 2009 7:04 PM
> To: thelist at lists.evolt.org
> Subject: [thelist] CSS transparency question
>
> 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 !
>
> --
>
> * * 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 !
>