> Yes. The better approach is to use rgba colors for elements containing text.
> That way only the box is affected and the text (or any other child elements)
> remain unaffected.
>
> RGBA stands for red, green, blue, and alpha. So this declaration renders a
> box
> 80% opaque, while stuff inside the box is fully opaque:
>
> #elli-box {
> background-color: black;
> background: rgba(255,255,255,.8);
> }
>
> The background-color property is a fallback for older browsers lacking
> support
> for RGBA.
>
> 255,255,255 is white
> 0,0,0 is black
>
> Most code editors now have the ability to let you easily set colors like this.
>
> Here is a quick example:
> http://www.projectseven.com/csslab/css3/rgba/quick-test.htm
>
> The styles used on the example are:
>
> #elli-box {
> background-color: #3CF;
> background: rgba(51,204,255,.8);
> /*Light Blue*/
> }
>
> And some design extras:
>
> .elli-styles {
> padding: 40px;
> width: 400px;
> font-size: 14px;
> line-height: 1.5;
> border-radius: 11px;
> box-shadow: inset 0px 0px 40px #0080AA;
> border: 2px solid #FFF;
> }
>
> -- Al Sparber - PVII
> http://www.projectseven.com
> The Finest Dreamweaver Menus | Galleries | Widgets
> Since 1998
Thanks you guys! Al, Phillipe, Tom, L. David Baron & Alan you're all
awesome!!!!
I now have a much clearer understanding on the apparent translucent
effect of the opacity property on child elements and how to solve it.
Elli Vizcaino
Creating meaningful connections and compelling
experiences through the art & beauty of design.
http://www.e7flux.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
