Nakładanie tekstu i kolorów tła na obrazku

Question

Próbuję utworzyć nakładkę w jednolitym kolorze, która dokładnie pasuje do rozmiaru obrazu i wyświetlać tekst na tej nakładce. Chciałbym to zrobić tylko za pomocą HTML i CSS, jeśli to możliwe.

obraz może być dowolnej wielkości, i tak zaprojektowany, aby pasować i wycentrowana opakowanie macierzystego. Coś jak ten (który nie działa):

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

Myślałem, że <figure> znaczników HTML5 jest może tutaj pomóc, ale nie mają odniosło wiele sukcesów na tym froncie. Poniższa tabela zachowuje szerokość napisów dopasowaną do szerokości obrazu, ale gdy próbuję usunąć go z obiegu dokumentów i umieścić go nad obrazem, kończy się na lewo od obrazu z powodu centrowania obrazu za pomocą margin: 0 auto;.

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

Answer 1

Zrobiłem dla ciebie przykład. http://jsfiddle.net/kb3Kf/2/

Najważniejsze, że brakowało to, że dał tekst bezwzględną pozycję, ale nie dać owijki do jednego krewnego, tak:

.img-overlay 
{ 
    position: relative; 
} 

To naprawdę proste, można go wziąć w wielu kierunkach. Powiedz mi, czy tego właśnie chcesz.

Answer 2

Po prostu brakuje ustawienia pozycji elementu nadrzędnego img-nakładki. Kiedy coś ma pozycję "absolutną", odnosi się do tego, gdzie jest w stosunku do rodzica. Rodzic musi mieć pozycjonowanie.

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

}