How To - 이미지 위의 텍스트 블록

w3.css

이미지 위의 텍스트 블록

이미지 위에 텍스트 블록을 배치하는 방법을 알아보자.

이미지에 텍스트 블록을 배치하는 방법

1단계) HTML 추가

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
</div>

2단계) CSS 추가

/* Container holding the image and the text */
.container {
  position: relative;
}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

기본 예시

예제 보기