Transparent background, clear text?

Question

Hey all,

been banging my head against this one for a while. For a CSS redesign of a site I need a parent div to have a background-image followed by a p child with a transparent background, but foreground text needs to remain at 100% opacity. I tried making a 1px image of a semitransparent (40%) white, but it won't show up when used with background-image. I've verified it's not related to repeat being off.

If I go by proprietary stuff the text ends up affected as well, which doesn't work.

The site needs to switch between 2 designs so I can't move the text into another child element.

JQuery is used heavily if that can help me it would be perfect.

Markup:

CSS:

.titles
{
    background-color: #FFF;
    background-image: URL("../images/Vessel_TitleBackground.jpg");
    padding-top: 2px;
    font-weight: bolder;
    text-align: left;
}
.titles p
{
    text-indent: 2%;
    background-color: #FFF;
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
    font-size: 1.1em;
    color: #000;
}

HTML:

<div>
    <div class="titles">
        <p>YEY</p>
    </div>
    <div class="contents">YEY
    </div>
</div>

Answer 1

Modern browsers (Firefox, Chrome, Safari, Opera) support RGBA:

#container p { background-color:rgba(255,255,255,0.4); }  

The above CSS rule will set a 40% semitransparent white background on the P element.

However, IE8 and below does not support this (IE9 will have support). Therefore, you need a workaround for IE. You could use IE conditional comments to define a additional CSS rule just for IE8 and below, which would set a semitransparent image...

<!--[if lt IE 9]>
<style>
    #container p { background-image:url(dot.png); }
</style>
<![endif]-->

If you have trouble making the semi transparent image work, here's a demo: http://vidasp.net/tinydemos/img-40-percent-transparent.html

btw, IE6 does not support semi-transparent PNG's so you will have to use another workaround just for that browser. http://stackoverflow.com/questions/1266125/transparent-background-png-image-issue-in-ie6

Answer 2

CSS opacity affects both foreground and background. If you want to have the background semi transparent and at the same time keep the text opaque, you should check out CSS3 rgba color values:

div p {background: rgba(255,255,255,.5)}