Text- und Hintergrund-Farbüberlagerung auf Bild

Question

Ich versuche, ein einfarbiges Overlay zu erstellen, das genau der Größe eines Bildes entspricht, und Text auf diesem Overlay anzuzeigen. Ich würde dies nur mit HTML und CSS tun, wenn möglich.

Das Bild von jeder Größe sein kann, und wird innerhalb der übergeordneten Container zu passen und zentriert dimensioniert werden. So etwas wie dies (was nicht funktioniert):

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); 
} 

Ich dachte, dass <figure> Tag HTML5 könnte hier helfen, haben aber nicht hatte viel Erfolg an dieser Front. Im Folgenden wird die Beschriftungsbreite an die Bildbreite angepasst, aber wenn ich versuche, sie aus dem Dokumentfluss zu entfernen und über dem Bild zu positionieren, endet sie aufgrund der Bildzentrierung über margin: 0 auto; links vom Bild.

<figure> 
    <img src="file.jpg"> 
    <figcaption>Text will flow...</figcaption> 
</figure> 

Answer 1

Ich machte ein Beispiel für Sie. http://jsfiddle.net/kb3Kf/2/

Die Hauptsache, die fehlte, war, dass Sie den Text um eine absolute Position gab, aber dass der Wrapper Relative man nicht geben, etwa so:

.img-overlay 
{ 
    position: relative; 
} 

Es ist wirklich einfach, man kann es dauern in viele Richtungen. Sag mir, wenn du das wolltest.

Answer 2

Sie verpassen nur die Position des übergeordneten Elements img-overlay. Wenn etwas eine Position von "absolut" hat, bezieht sich das auf den Bezug zu seinem Elternteil. Der Elternteil muss eine Positionierung haben.

.img-overlay { 
    position: relative; 
    width: 300px; 

} 

.img-overlay img { 
width:100%; 
} 

.overlay { 
    position: absolute; 
    width:100%; 
    height: 100%; 
    top:0px; 
    left:0px; 
    background-color: rgba(255,255,255,0.5); 

}