CSS를 사용하여 이미지 위에 텍스트를 정확하게 배치하려면 어떻게 해야 합니까?

CSS를 사용하여 이미지 위에 텍스트 위치 지정

CSS에서 이미지 위에 텍스트를 추가할 때 정확한 정렬을 달성하는 것이 어려울 수 있습니다. 이미지 위에 텍스트를 효과적으로 배치하는 다양한 방법을 살펴보겠습니다.

귀하의 예에서는 위치:절대값을 텍스트 요소에 사용했는데, 이는 올바른 접근 방식입니다. 그러나 위치 지정에는 위쪽, 왼쪽 및 너비 속성을 정확하게 설정하는 것도 포함됩니다.

코드에서:

.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}

문제는 h2에서 너비: 100% 및 왼쪽: 0을 사용하는 데 있습니다. 요소. 이로 인해 텍스트가 이미지 경계를 넘어 확장됩니다. 대신 너비를 특정 px 값으로 설정하여 이미지 너비보다 작은지 확인하세요.

이미지 위에 텍스트를 배치하는 또 다른 옵션은 z-인덱스와 절대 위치를 사용하는 것입니다. 예는 다음과 같습니다.

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div>
<p>z-index를 사용하면 텍스트를 다른 요소 위에 배치할 수 있습니다. 상단 및 왼쪽 속성을 꼼꼼하게 설정하면 텍스트가 이미지 중앙에 위치하도록 할 수 있습니다.</p>
<p>마지막으로 background-image를 사용할 때 html2pdf가 이 기능을 지원하는지 확인하세요. 그렇지 않으면 원하는 결과를 얻지 못할 수도 있습니다.</p>
</div>

위 내용은 CSS를 사용하여 이미지 위에 텍스트를 정확하게 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!