그림 위에 자막 형식으로 텍스트를 표시해야 하는 경우가 많이 발생합니다. 이렇게 이미지 위에 텍스트를 배치(오버레이)시키려면 외부 divrelative 속성을 적용하고 내부의 텍스트 부분의 요소에는 absolute 속성을 적용시키면 됩니다.

CSS 예시:

.outer {
position: relative;
background: url(/images/css_textoverimage.jpg);
width: 500px; // 너비 설정
height: 309px; // 높이 설정
}
.bottomleft {
position: absolute;
bottom: 0;
left: 0.5em;
width: 400px;
font-weight: bold;
color: #fff;
}
.topright {
position: absolute;
top: 1em;
right: 2em;
width: 120px;
padding: 4px;
background-color: #fff;
font-weight: bold;
font-size: 11px;
}

HTML 예시:

<div class="outer">
<div class="bottomleft">
<p>(이미지의 왼쪽 하단에 표시됨)</p>
</div>
<p class="topright">(이미지의 오른쪽 상단에 표시됨)</p>
</div>
// Source: the-art-of-web.com

top, right, left 등의 값을 조정하여 원하는 곳에 텍스트를 이미지 내에 표시할 수 있습니다.

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨주세요.