3

У меня есть список изображений, которые я пытаюсь перекрыть, чтобы они выглядели примерно так:

введите сюда описание изображения

Мой код:

.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
}
<div class="avatars">
    <span class="avatar">
        <img src="https://picsum.photos/70" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/50" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/20" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/100" width="25" height="25"/>
    </span>
    <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

Но, очевидно, мне нужно увеличивающееся левое значение и уменьшающийся z-индекс для количества изображений аватара. Конечно, я мог бы сделать это с помощью директивы @for, но дело в том, что количество imgs аватаров варьируется. Я смотрел на функцию length(), но она не работает так, как я собирался ее использовать.

Другая идея состоит в том, чтобы иметь div с установленной шириной и помещать изображения внутри него, но это имеет свои собственные проблемы (что, если есть 5 изображений или 20, как управлять шириной?). Я также мог комбинировать изображения так, как я хочу, в другом месте и не использовать CSS.

Свободный перевод вопроса Overlapping/overlaying multiple inline images от участника @Chicken Suop.

1

2 ответа 2

3

Вы можете использовать flex и обратный порядок, тогда z-index не нужен:

.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;
}
<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>

Вот еще одна идея со scale:

.avatars {
  display: inline-block;
  transform: scale(-1, 1);
}

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

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

.avatar img {
  width: 100%;
  display: block;
  transform: scale(-1, 1);
}
<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>

Еще одна идея использовать маску на случай, если вы хотите сохранить порядок ваших изображений. Это также даст вам прозрачность между изображениями:

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
  -webkit-mask:radial-gradient(circle 55px at 5px 50%,transparent 99%,#fff 100%);
          mask:radial-gradient(circle 55px at 5px 50%,transparent 99%,#fff 100%);
}

.avatar img {
  width: 100%;
  display: block;
}

body {
  background:pink
}
<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>

Еще одна идея с использованием трюка с 3D transformation (без прозрачности)

.avatars {
  transform-style:preserve-3d; /* here */
}

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
  transform:rotateY(-1deg); /* and here */
}

.avatar img {
  width: 100%;
  display: block;
}
<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>

Свободный перевод ответа от участника @Temani Afif.

2

Мне больше нравится ответ @Temani, но если вы не можете использовать flex, потому что вам нужно поддерживать IE 9 или более раннюю версию, я оставлю это здесь.

Обратите внимание, что направление текста теперь справа налево, поэтому вам нужно изменить порядок ваших аватаров.

.avatar img {
  border-radius: 50%;
  position: relative;
  left: -5px;
  margin-left: -25px;
  z-index: 1;
}
.avatars {
  direction: rtl;  /* Это для того, чтобы получить стек с левым верхом */
  text-align: left;  /* Теперь нужно выровнять по левому краю. */
  padding-left: 25px;  /* То же значение, что и отрицательная margin */
}
<div class="avatars">
  <span class="avatar">
        <img src="https://www.fillmurray.com/50/50" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/100/100" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/200/200" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/150/150" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/50/50" width="50" height="50"/>
    </span>
  <!-- Переменное количество дополнительных аватаров -->
</div>

Свободный перевод ответа от участника @Jon P.

2
  • а для чего нужен ie9 в 2021 году ? он вроде уже не используется уже и очень давно 24 апр 2021 в 2:49
  • и да кстати ..я минусы не ставлю не смотря на агрессию и минусы в мою сторону 24 апр 2021 в 2:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.