특히 동적 이미지 개수를 처리할 때 음수 위치 지정이나 Z-색인을 사용하지 않고 CSS에서 겹치는 인라인 이미지를 얻으려면 어떻게 해야 합니까?

인라인 이미지 겹침: CSS 솔루션

인라인 이미지 겹침을 구현하는 것은 어려울 수 있지만 CSS를 주의 깊게 조작하면 가능합니다. 이 기사에서는 flexbox와 역순을 활용하여 제공된 이미지와 유사한 효과를 생성하는 솔루션을 살펴보겠습니다.

문제

원본 코드에서는 다음을 사용합니다. 음의 위치 지정 및 Z-인덱스를 사용하여 이미지를 겹치게 하지만 이러한 방법에는 동적 이미지 개수에 한계가 있습니다. 외부에서 이미지를 결합하거나 설정된 너비 컨테이너를 사용하는 등의 다른 옵션에는 고유한 단점이 있습니다.

해결책

이러한 어려움을 피하려면 flexbox와 이미지 순서를 반대로 바꿔보세요. 다음 CSS 코드는 이 접근 방식을 보여줍니다.

<code class="css">.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar {
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:last-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
}</code>

설명

• Flex 방향: Flex 방향을 행으로 설정했습니다. -reverse - 마지막 이미지가 맨 왼쪽에 나타나도록 이미지의 순서를 반대로 합니다.
• 음수 여백: 중첩 효과를 만들기 위해 다음을 제외한 모든 이미지에 음수 여백을 적용합니다. 마지막 것. 원하는 겹침에 따라 여백의 양을 조정할 수 있습니다.
• 테두리: 시각적으로 구분하기 위해 각 이미지 주위에 흰색 실선 테두리가 추가됩니다.

HTML 구조

제공된 CSS 스타일과 함께 다음과 같이 HTML을 조정하세요.

<code class="html"><div class="avatars">
  <span class="avatar">
    <img src="image1.jpg">
  </span>
  <span class="avatar">
    <img src="image2.jpg">
  </span>
  <span class="avatar">
    <img src="image3.jpg">
  </span>
</div></code>

이 코드는 복잡한 계산이나 작업 없이 겹치는 인라인 이미지 행을 생성합니다. 외부 이미지 조작. 효과는 완전히 역동적이며 이미지 수에 관계없이 적용됩니다.

위 내용은 특히 동적 이미지 개수를 처리할 때 음수 위치 지정이나 Z-색인을 사용하지 않고 CSS에서 겹치는 인라인 이미지를 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!