Bagaimanakah Saya Boleh Mencipta Imej Sebaris Bertindih Menggunakan Flexbox?

Imej Sebaris Bertindih Dengan Berkesan Menggunakan Flexbox

Dalam usaha mencipta paparan imej sebaris bertindih yang menawan secara visual, gabungan CSS dan HTML boleh digunakan untuk mencapai kesan yang diingini.

Penggayaan CSS

Untuk hasil yang optimum, gunakan gaya pada div merangkumi yang mengandungi imej avatar. Dengan menggunakan flexbox, tetapkan sifat paparan kepada inline-flex dan konfigurasikan arah flex kepada row-reverse, dengan itu menjajarkan imej dari kanan ke kiri.

Selain itu, tentukan bekas avatar individu dengan kedudukan relatif dan tetapkan mereka lebar dan sempadan bulat yang konsisten menggunakan jejari sempadan. Untuk mengelakkan imej daripada tertumpah keluar dari bekasnya, tetapkan limpahan kepada tersembunyi.

Untuk meningkatkan kesan bertindih, laraskan jidar setiap avatar, tidak termasuk yang terakhir, kepada nilai negatif.

Dalam setiap bekas avatar, nyatakan dimensi imej dan pastikan ia dipaparkan sebagai blok.

Penanda HTML

Dalam div yang ditetapkan untuk avatar, masukkan sebarang bilangan elemen rentang yang mewakili avatar individu. Setiap span hendaklah mengandungi imej dengan atribut src yang sesuai untuk memaparkan foto yang diingini.

Kod Contoh

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Imej Sebaris Bertindih Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!