이미지의 텍스트 및 배경색 오버레이

Question

이미지의 크기와 정확히 일치하는 단색 오버레이를 만들고 해당 오버레이에 텍스트를 표시하려고합니다. 가능하다면 HTML과 CSS만으로이 작업을하고 싶습니다.

이미지는 임의의 크기 일 수 있고, 적합하도록 크기 및 부모 컨테이너 내에 중심으로한다. 이런 식으로 뭔가 (작동하지 않는) :

HTML :

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

CSS : 나는 HTML5의 <figure> 태그는 여기에 도움이 아니지만있을 수 있습니다 생각

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

그 앞에서 많은 성공을 거두었습니다. 다음은 캡션 너비를 이미지 너비에 고정하지만 이미지 흐름에서 캡션 너비를 제거하고 이미지 위에 놓으려고하면 margin: 0 auto;을 중심으로 이미지 중심으로 이미지의 왼쪽까지 끝납니다.

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

Answer 1

나는 당신을 위해 모범을 보였습니다.

이

.img-overlay 
{ 
    position: relative; 
} 

정말 간단합니다, 당신이 그것을 수행 할 수 있습니다 실종됐다 http://jsfiddle.net/kb3Kf/2/

중요한 것은 당신이 텍스트를 절대 위치를하는 듯했으나, 래퍼에게 상대 한 줄과 같이하지 않았다이었다 여러 방향으로. 그게 네가 원하는지 말해봐.

Answer 2

상위 img-overlay 요소의 위치를 ​​설정하지 않았습니다. 무언가가 "절대적인"위치를 가졌을 때, 그것은 그 부모와의 관계를 의미합니다. 부모는 포지셔닝을해야합니다.

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

}