Lớp phủ văn bản và màu nền trên hình ảnh

Question

Tôi đang cố gắng tạo lớp phủ màu đồng nhất khớp chính xác với kích thước của hình ảnh và hiển thị văn bản trên lớp phủ đó. Tôi chỉ muốn làm điều này với HTML và CSS, nếu có thể.

Hình ảnh có thể được kích thước bất kỳ, và sẽ được kích thước để phù hợp và tập trung trong container cha của nó. Một cái gì đó như thế này (mà không làm việc):

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

Tôi nghĩ rằng thẻ <figure> HTML5 có thể giúp được ở đây, nhưng có không đã có nhiều thành công trên mặt trận đó. Sau đây giữ chiều rộng phụ đề được cố định với chiều rộng hình ảnh, nhưng khi tôi cố gắng xóa nó khỏi luồng tài liệu và định vị nó trên hình ảnh, nó sẽ kết thúc ở bên trái của hình ảnh do hình ảnh định tâm qua margin: 0 auto;.

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

Answer 1

Tôi đã làm ví dụ cho bạn. http://jsfiddle.net/kb3Kf/2/

Chính điều đó đã mất tích là bạn đã đưa ra văn bản một vị trí tuyệt đối nhưng không cung cấp cho các wrapper một tương đối, như vậy:

.img-overlay 
{ 
    position: relative; 
} 

Nó thực sự đơn giản, bạn có thể mang nó theo nhiều hướng. Cho tôi biết nếu đó là những gì bạn muốn.

Answer 2

Bạn chỉ thiếu cài đặt vị trí của phần tử phụ huynh img-overlay. Khi một cái gì đó có một vị trí của "tuyệt đối", mà đề cập đến nơi nó có liên quan đến cha mẹ của nó. Cha mẹ cần phải có vị trí.

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

}