Flexbox를 사용하여 겹치는 인라인 이미지를 어떻게 만들 수 있습니까?

Flexbox를 사용하여 효과적으로 겹치는 인라인 이미지

겹쳐진 인라인 이미지를 시각적으로 매력적으로 표시하기 위해 CSS와 HTML의 조합 원하는 효과를 얻기 위해 사용할 수 있습니다.

CSS 스타일링

최적의 결과를 얻으려면 아바타 이미지가 포함된 전체 div에 스타일을 적용하세요. flexbox를 활용하여 표시 속성을 inline-flex로 설정하고 플렉스 방향을 행-역방향으로 구성하여 이미지를 오른쪽에서 왼쪽으로 정렬합니다.

또한 개별 아바타 컨테이너를 상대 위치 지정으로 정의하고 border-radius를 사용하여 일관된 너비와 원형 테두리. 이미지가 컨테이너 밖으로 쏟아지는 것을 방지하려면 오버플로를 숨김으로 설정하세요.

겹침 효과를 높이려면 마지막 아바타를 제외한 각 아바타의 여백을 음수 값으로 조정하세요.

각 아바타 컨테이너 내에서 이미지 크기를 지정하고 블록으로 표시되는지 확인하세요.

HTML 마크업

아바타용으로 지정된 div 내에는 다음과 같은 범위 요소를 원하는 수만큼 포함하세요. 개별 아바타를 나타냅니다. 각 스팬에는 원하는 사진을 표시하기 위한 적절한 src 속성이 있는 이미지가 포함되어야 합니다.

예제 코드

<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>

<code class="html"><div class="avatars">
  <span class="avatar">
    <img src="https://picsum.photos/70">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/80">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/90">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/100">
  </span>
</div></code>

위 내용은 Flexbox를 사용하여 겹치는 인라인 이미지를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!