[CSS] 텍스트 오버레이

그림 위에 자막 형식으로 텍스트를 표시해야 하는 경우가 많이 발생합니다. 이렇게 이미지 위에 텍스트를 배치(오버레이)시키려면 외부 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)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.