Question

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. Transparent background png image issue in IE6