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

Question

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?

Solution 1

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

Solution 2

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

Solution 3

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.

Solution 4

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/

View more solutions

Comments

[g_thom]

Very cool. I haven't used that before, but it works. I'm not sure about the maintainability, though, as it doesn't work for IE8 and below, and requires an IE Filter for IE8 and below (css-tricks.com/2151-rgba-browser-support).

[Laxmidi]

Hi g_thom, Thank you for your message. I'm afraid that I wasn't clear enough in my question. The image is large and I can't tile it. It's a picture of a person at an event. Thank you.

[Laxmidi]

Hi OverZealous, Thank you for your suggestion. I've never used rgba, but it looks cool. Unfortunately, I think that I need wider browser support, so something so new, might not be the best solution for me. Thank you.

[g_thom]

Laxmidi, the "my-small-bg.png" image is a semi-transparent png in the background of your text description. See jsfiddle.net/f6XS6/1

[bozdoz]

I think it's easier to put the image before the background before the text; then you don't need to include the z-indexes. FYI. Should work though.

[g_thom]

@bozdoz, if IE6 support is a requirement, then transparent png's are only possible with a pngfix hack.

[g_thom]

Laxmidi - I wouldn't give up on this option, since the IE filter is not that complicated (if that's the only drawback)

[bozdoz]

Something like that. For most cases I find it easy to label every png as class="png", then I believe that .png {background:inherit} works quite well; if not, then I could substitute whatever background color should be behind the image. I agree though; I've had to deal with this a few times, and it can be aggravating to work with IE6.

[Beez]

The only difference between your demo and mine is size and you don't have a wrapper. Which, if the OP has more than these elements on a page, will be needed. Am I missing something?

[g_thom]

That is a nice trick. I'll check that out. Fortunately, our support contract states IE7 is the minimum browser supported, unless specifically asked!

[OverZealous]

One worry about using IE filters is they make everything look terrible. (Ex: no anti-aliasing.) Just a thought.

[g_thom]

I guess every solution here has its drawbacks, but I do like yours. I learned something, at least.

[bozdoz]

You're probably more correct. I just wanted to show that it works with a background div before the content div. I plus one'd you; a lot because our answers are the same, and because yours is more complete. I'm not sure if he needs width and height for the wrapper; it's more important to have height and width for the image (i.e. 300 and 300, in your case), so that the browser will know how much space to give it before it loads. Well done though; you answered half an hour before me. :)

[bozdoz]

I think your transparent image idea would be great for professional (or better looking) sites, that may want more than just a plain, patternless color, by the way. In the long run, your solution might be this guy's best option.

[Beez]

My competitive nature said "Watch yourself." But really, it doesn't matter. As long as he gets an answer and at least one person learns from this question, that's all that really matters, I suppose. Definitely a good site you used there. I always keep an html file on my desktop that I test little things like this with. That site is nice.

[g_thom]

I'd be interested in what they go for. No shortage of options for sure.

[Laxmidi]

@g_thom, Okay, now I understand what you mean by the tiling image. (And thankfully, I don't have to worry about IE6, either). Thank you.

[Laxmidi]

@Bozdoz, Thank you for the suggestion. I appreciate the help. I'm a lucky guy, I've got a lot of working possibilities! Thanks.

[Laxmidi]

Hi Beez, Thanks so much for the solution. That works great. I'm psyched that so many people came up with good suggestions, too.

[Beez]

I know this is old, but I didn't like that I used ids for styling. I don't want to perpetuate bad practices, so I updated it (and gave it a little flair).