[thelist] [CSS] - semi transparent background colour, with solid text...?

[ben morrison]

On Mon, Dec 1, 2008 at 10:23 AM, Tris <beertastic at gmail.com> wrote:

> Anyhoo..
> The main page title is white text, sitting on a semi transparent black
> background, so you can see the large background image (on the body
> tag).
> When I use opacity in my CSS file, it works great, but apparently
> opacity  is inherited  and the white text becomes transparent too.

This is correct, the opacity is inherited, you have a few options.
1. use a background png - http://www.alistapart.com/stories/pngopacity/
2. use absolute positioning and opacity

    <div id="holder">
        <div id="titleContainer">

        </div>
         <div id="titleText">
          My title
         </div>
    </div>

	   #titleContainer {
        background-color: #000;
        filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;
        min-height:100px;
       }
       #titleText{
           position:absolute;
           left:0;
           top:0;
           color: #fff;
       }
       #holder {
           position:relative;
       }

The problem with this technique is the height - you will have to
supply a height to the container.

Easiest solution may be the background png.

ben
-- 
Ben Morrison