title: Darken the background beneath white text in CSS
body: <p>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.</p>
  
  <p>This is an example fiddle - <a href="http://jsfiddle.net/7dgpbLd8/1/" rel="noreferrer">http://jsfiddle.net/7dgpbLd8/1/</a></p>
  
  <p>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.</p>
  
  <p><code></code></p>