합성을 사용하지 않고 HTML에서 이미지를 어떻게 겹칠 수 있습니까?

합성 없이 HTML에서 겹치는 이미지 배치

웹 페이지에 여러 이미지를 표시하고 일부 이미지는 이미지 위에 표시하려고 합니다. 성능상의 이유로 합성에 의존하지 않고 다른 것. 해결책을 살펴보겠습니다.

이미지 오버랩을 달성하려면 HTML 및 CSS 위치 지정 기술을 사용할 수 있습니다. 상위 컨테이너 내에 이미지를 래핑하고 상대 위치 지정을 적용합니다. 개별 이미지에는 절대 위치가 지정되어야 합니다.

다음은 예제 코드 조각입니다.

<div class="parent">
  <img  class="image1 lazy" src="/static/imghwm/default1.png" data-src="blue-square.png" alt="합성을 사용하지 않고 HTML에서 이미지를 어떻게 겹칠 수 있습니까?" >
  <img  class="image2 lazy" src="/static/imghwm/default1.png" data-src="red-square.png" alt="합성을 사용하지 않고 HTML에서 이미지를 어떻게 겹칠 수 있습니까?" >
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}

.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

이 예에서 상위 컨테이너에는 상대 위치가 있으므로 하위 이미지를 상대적으로 배치할 수 있습니다. 그것에. image1은 상대 위치를 가지며 초기 위치를 유지합니다. image2는 절대 위치 지정을 가지며 상위 컨테이너의 상단 및 왼쪽 가장자리에서 30px만큼 오프셋됩니다.

이 접근 방식을 사용하면 합성 오버헤드 없이 이미지의 위치를 ​​정확하게 지정할 수 있습니다. 이는 여러 이미지를 동적으로 표시해야 하거나 위치 지정 요구 사항이 복잡한 시나리오에 특히 유용합니다.

위 내용은 합성을 사용하지 않고 HTML에서 이미지를 어떻게 겹칠 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!