Darken the background beneath white text in CSS

Question

I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.

This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/

This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.

Answer 1

Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
  color: white;
  text-shadow: 0 1px black;
}

.dark {
  background: #333;
}

.light {
  background: #ccc;
}

<div class="dark">Some text</div>
<div class="light">Some text</div>

Or you can ever merge our two approaches.

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}

.dark {
  background: #333;
}

.light {
  background: #ccc;
}

span {
  color: white;
  text-shadow: 0 1px black;
  background: #333;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 8px;
}

<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>

The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.

It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.

Answer 2

I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.

http://jsfiddle.net/3w34k1ea/

    .img-wrapper{
    width: 100%;
    height: 100%;
    background: #000;    
}
     img {
      width: 100%
        height: 100%;
        opacity: .5;
}
     img:hover{
    opacity: .3;
}
     p {
    color: white;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 20px;
}

Answer 3

I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:

text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px  rgba(0,0,0,1);

FIDDLE

Answer 4

The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7

<div class="box">

    <div class="overlay top">
        text
    </div>

    <img ... />

</div>

.box {
    position: relative;
}

.box .overlay {
    background-color: rgba(0, 0, 0, 0.50);
    color: rgb(255, 255, 255);
    position: absolute;
}
    .box .overlay.top {
        top: 0px;
    }

Answer 5

Put the text inside a <span> tag and give it a class, then in your CSS file:

span.your-class {
    background:rgba(255,255,255,0.5);
    padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}

This will put the text inside a semi-transparent box ontop of the image. Experiment with your text colour, and the background colour until you're happy.

Here's an example: http://jsfiddle.net/9svp8qoh/

Answer 6

I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.

You can add opacity only to background:

rgba(255,0,0,0.5)

Check this post

Answer 7

There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:

img {
    filter: brightness(20%);
}

A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK

Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.

For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/

Answer 8

you can use background property of css where in you can give color and image path eg :-

background:#FFFFFF url("image path");

This will add background color to image.