그림 위에 자막 형식으로 텍스트를 표시해야 하는 경우가 많이 발생합니다. 이렇게 이미지 위에 텍스트를 배치(오버레이)시키려면 외부 div에 relative 속성을 적용하고 내부의 텍스트 부분의 요소에는 absolute 속성을 적용시키면 됩니다.
[CSS] 텍스트 오버레이
예를 들어, 다음과 같은 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 등의 값을 조정하여 원하는 곳에 텍스트를 이미지 내에 표시할 수 있습니다.
참고로 뉴스페이퍼, 아바다 등의 워드프레스 테마에서는 개별 글이나 페이지에서 제목 헤더 부분에 특성 이미지나 특정 이미지를 배경으로 표시할 수 있습니다.
댓글 남기기