Question

I have this CSS for an image caption:

#capt{
    position: relative; 
    height: 391px;
}

#capt > p.imgCaption{
    position: absolute;
    top: 348px;
    background-color: #56631e;
    opacity:0.6;
    left: 2px;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    width: 547px;
    font-family: "HelNue";
    font-weight: bold;
    font-size: 17px;
    color: white;
    height: 25px;
    z-index: 99999;
    padding: 7px 0 0 5px;
}
span#op{
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    z-index: 9999999;
}

And the HTML is:

<div id="capt">
  <p class="imgCaption">
      <span id="op">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
  </p>
  <img src="image here" />
 </div>

Now, the placement and everything is fine, the bg color is fine and opacity is fine, however the text is keeping the opacity from the imgCaption class and it looks murkey. Have I made any errors in this or is this a common problem?

If you know a workaround I would me most grateful 🙂 thank you!

Answer 1

This is the “common problem”.

Instead of opacity you should use a CSS3 background-color with alpha:

background-color: rgba(255,0,0,1);

Check out this website

http://www.css3.info/introduction-opacity-rgba/

EDIT: of course you should change this rgba values with yours.