Le texte et la couleur d'arrière-plan de superposition sur l'image

Je suis en train de créer un solide superposition de couleurs qui correspond exactement à la taille d'une image, et l'affichage du texte sur ce segment. J'aimerais le faire avec HTML et CSS uniquement, si possible.

Le texte et la couleur d'arrière-plan de superposition sur l'image

Le texte et la couleur d'arrière-plan de superposition sur l'image

L'image peut être de toute taille, et sera de taille pour s'adapter et centrée au sein de son conteneur parent. Quelque chose comme ceci (qui ne fonctionne pas):

HTML:

<div class="img-overlay">
  <img src="file.jpg">
  <div class="overlay">Text will flow...</div>
</div>

CSS:

.img-overlay img {
  margin: 0 auto;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
  background-color: rgba(255,255,255,0.5);
}

J'ai pensé que le HTML5 est <figure> balise peut aider ici, mais je n'ai pas eu beaucoup de succès sur ce front. La suite tient la largeur de légendes rattachées à la largeur de l'image, mais quand j'essaie de retirer de la circulation des documents et de la position sur l'image, il se retrouve à la gauche de l'image par l'image de centrage par margin: 0 auto;.

<figure>
  <img src="file.jpg">
  <figcaption>Text will flow...</figcaption>
</figure>
InformationsquelleAutor ericsoco | 2013-08-11