Make Text Appear White With Semi-Transparent Black Background When Superimposed on an Img

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.

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.

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?

 <style type="text/css">

        .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;

        }
    </style>

    <div class开发者_开发问答="wrap">
        <img src="path/to/pic.png" />
        <h6 class="desc">This is my text about my image</h3>

    </div>

Any suggestions?

How about like this:

CSS

.mod {
  position: relative;
  width: 80px;
  height: 100px;
  padding: 5px;
}
.mod-text,
.mod-background {
  position: absolute;
  left: 0;
  width: 100%;
}
.mod-text {
  color: #FFF;
  font-size: 1em;
  text-align: center;
  bottom: 0;
}
.mod-background {
  background-color: #f58322;
  border-radius: 8px;
  filter: alpha(opacity=60);
  opacity: 0.60;
  top: 0;
  height: 100%;
}

HTML

<div class="mod">
  <img src="http://www.gravatar.com/avatar/d543f6789b58df56f6fed95291e78261.png" />
  <div class="mod-background">
    &nbsp;
  </div>
  <div class="mod-text">
    Hawt!
  </div>
</div>

Plnkr

http://plnkr.co/edit/aSd9rO?p=preview

Depending on your browser support requirements, you might be able to get away with leaving opacity at 100%, and using an rgba color:

background-color: rgba(0,0,0,0.5);

The colors are Red, Green, Blue, (0-255 each) followed by Alpha (0-1.0).

If you need a fallback in older browsers, you can usually use:

background-color: #000;
background-color: rgba(0,0,0,0.5);

This will default to Black for older browsers, and semi-transparent for newer ones. It avoids an extra download (of a tiling image), as well as keeping more of your styling in the text file (easier to version, maintain, and find).

I would create another div before the description with the same height and width, set that div's opacity to transparent, add a background, then put the description in another div, without a background. If they both have absolute position, then the latter should go on top of the former.

See the demo here.

You can put a semi-transparent image in the background of the element instead. The actual image can be very small and you can repeat it to cover the whole background.

.wrap .desc {
      display: block;
      position: absolute;
      width: 166px;
      top: 20px;
      left: 20px;
      z-index: 2;
      color: #FFFFFF;
      padding: 10px;
      background: url('my-small-bg.png');
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
}

Here's an example of what this could look like: http://jsfiddle.net/f6XS6/1/