Html: put text in semitransparent div

Question

I want to put text in semitransparent div, and here is what I've done.

Html

<div class="overlay_image">
   <div>
       <h1 class ="slogan">In div</h1>
   </div>
</div>
<h1 class ="slogan">Out of div</h1>

CSS

.overlay_image {
    width: 800px;
    height: 160px;
    background: #0066CC;
    opacity: 0.35;
}

.slogan{
     opacity: 1;
}

Demo

However, I want the color in div is equal to the color out of div. I don't want the words In div become semitransparent.

Answer 1

Use rgba() for the background. This way, only the background will be transparent, but the contents of the element are unaffected.

.overlay_image {
    width: 800px;
    height: 160px;
    background: rgba(0, 102, 204, 0.35); /* use rgba */
    /*opacity: 0.35;*/
}