CSS: Opacity Issue

Question

Ok, so in my page I am showing a background image with this css:

.heroarea {
    background:url(/static/images/mrd_hero_01.jpg) no-repeat;
    height:450px;
}

and the copy placed over it and the container the copy is in have these styles:

.main-panel {
    position: absolute;
    top: 130px;
    left: 380px;
    background: #fff;
    width: 560px;
    height: 340px;
    padding: 30px 30px 20px 30px;
    /* CSS3 standard */
    opacity:0.5;
    /* for IE */
    filter:alpha(opacity=50);
}
.main-panel h1 {
    background: transparent;
    color:#39372f;
    text-align: center;
    /* CSS3 standard */
    opacity:1;
    /* for IE */
    filter:alpha(opacity=100);
}

Generally, everything is as expected. That is, the image shows where I expect it to show. main-panel shows a white back ground with a transparent background. However, the text in the h1 tag is also transparent. I can see the image from underneath showing through. How can I make this so that the h1 tag content is not opaque?

Thanks!

Answer 1

Opacity applies to the element, not it's background.

You either need to use a translucent image, or an rgba background colour.

There is an explanation about how to do this in a backwards compatible way. (Disclosure: My site)

Answer 2

You have to move it outside of its .main-panel parent. There's no way to override the 50% opacity that's being applied there.

Alternatively, if you're only using 50% opacity to make the mrd_hero_01.jpg background image transparent, you could convert it to a .png with 50% opacity and then you wouldn't need to set the opacity on .main-panel.

Answer 3

Use rgba and/or transparent png. Alternatively, move the content to a separate sibling div as the background:

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

Answer 4

If you use transparency on a block element it makes the child element inside transparent as well.This is how css works ! I do not think there is any way to hack out of it. What you can do it to absolutely position h1 without making it a child or use a translucent image

Answer 5

It looks like your text is a child of .main-panel. It will take on 50% opacity. Even though you state the text is opacity 100% will only make it 100% of 50%. You will need to layer it outside of .main-panel and place it on top.