title: Make Text Appear White With Semi-Transparent Black Background When Superimposed on an Img
body: <p>I've got a simple CSS/HTMl question. I've got an image and some text in a div. I've got the text positioned on top of the image using the z-index. </p>
  
  <p>The text is white with a black background. I adjusted the text's div's opacity, so that the image beneath it is visible. It looks good. </p>
  
  <p>The problem is that the text appears gray instead of white, because the opacity is lowered. How can I make the text appear white, and still have a semi-transparent black background around it?</p>
  
  <pre><code> &lt;style type="text/css"&gt;
  
          .wrap {
            position:relative;
            float:left;
            clear:none;
            overflow:hidden;
          }
  
          .wrap img {
            position:relative;
            z-index:1;
          }
  
          .wrap .desc {
            display:block;
        position:absolute;
        width:166px;
        top:20px;
        left:20px;
        z-index:2;
        color: #FFFFFF;
        padding: 10px;
        background-color: #000000;
        border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
  
       /*For IE*/
        filter: alpha(opacity=60);
        opacity: 0.60;
  
          }
      &lt;/style&gt;
  
      &lt;div class="wrap"&gt;
          &lt;img src="path/to/pic.png" /&gt;
          &lt;h6 class="desc"&gt;This is my text about my image&lt;/h3&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions?</p>