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.
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>
Vous devez vous connecter pour publier un commentaire.
J'ai fait un exemple pour vous.
http://jsfiddle.net/kb3Kf/2/
La principale chose qui manquait, c'était que vous avez donné le texte à une position Absolue, mais de ne pas donner l'wrapper un rapport, comme suit:
C'est très simple, vous pouvez prendre de nombreuses directions. Dites-moi si c'est ce que tu voulais.
Vous manque juste le réglage de la position de la mère img-élément de superposition. Quand quelque chose a une position "absolue", qui fait référence à l'endroit où il est par rapport à sa mère. Le parent doit avoir positionnement.