[CSS] 텍스트 오버레이

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

예를 들어, 다음과 같은 CSS 코드를 사용할 수 있습니다.

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 등의 값을 조정하여 원하는 곳에 텍스트를 이미지 내에 표시할 수 있습니다.

참고로 뉴스페이퍼, 아바다 등의 워드프레스 테마에서는 개별 글이나 페이지에서 제목 헤더 부분에 특성 이미지나 특정 이미지를 배경으로 표시할 수 있습니다.