[thelist] CSS transparency question

[Jay Turley]

Thanks, Shannon, that's exactly what I needed to know.

On Thu, Sep 10, 2009 at 12:19 AM, Shannon Hubbell <brundlefly at gmail.com>wrote:

> 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 !
> >
> --
>
> * * 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 !
>