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

ben morrison morrison.ben at gmail.com
Mon Dec 1 06:34:32 CST 2008

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 id="titleText">
          My title

	   #titleContainer {
        background-color: #000;
           color: #fff;
       #holder {

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 Morrison

More information about the thelist mailing list