Re: FN-FORUM: transparent boxes in css

date posted 11th May 2006 16:36

Catherine Hutchinson wrote:
>
> I've created a site that uses photographic backgrounds with transparent
> boxes overlaying the photos. I have done this all in CSS using the
> following:
>
> #content { margin: 10px; padding: 10px; float: left; width: 55%;
> font-size: 0.8em; filter:alpha(opacity=65); -moz-opacity:.65;
> opacity:.65; background-color:#ffffff; border: 1px outset #003366;
> color:#003366; }
>
>
> About Us
> Some text
>
>
> However, it causes problems with visibility because the box and it's
> content is shown at 65% opacity. Ideally I want the text to be 100%
> opacity and the box behind it to be 65% - is this possible or am I
> hoping for too much?

I only ever made this work by absolutely positioning the text in a non
opaque transparent background box over the opaque box. (which brings
its own problems.)

the opacity is applied to the box content too

much quicker and easier to fake it, by using an opaqued background image.

;o)


--
Join me: http://wiki.workalone.co.uk/
Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F
Engage me: http://www.boldfish.co.uk/portfolio/