Bagaimanakah saya boleh mencapai imej sebaris bertindih dalam CSS tanpa bergantung pada kedudukan negatif atau indeks-z, terutamanya apabila berurusan dengan kiraan imej dinamik?

Imej Sebaris Bertindih: Penyelesaian CSS

Mencapai imej sebaris bertindih boleh menjadi satu cabaran, tetapi ia boleh dilakukan dengan manipulasi CSS yang teliti. Dalam artikel ini, kami akan meneroka penyelesaian yang menggunakan flexbox dan tertib terbalik untuk mencipta kesan yang serupa dengan imej yang disediakan.

Isunya

Kod asal menggunakan kedudukan negatif dan indeks-z untuk bertindih imej, tetapi kaedah ini mempunyai had apabila ia melibatkan kiraan imej dinamik. Pilihan lain, seperti menggabungkan imej secara luaran atau menggunakan bekas lebar yang ditetapkan, memperkenalkan kelemahan mereka sendiri.

Penyelesaian

Untuk mengelakkan kesukaran ini, anda boleh memanfaatkan flexbox dan membalikkan susunan imej. Kod CSS berikut menunjukkan pendekatan ini:

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

Penjelasan

• Arah Fleksibel: Kami menetapkan arah lentur kepada baris -terbalikkan untuk membalikkan susunan imej, dengan imej terakhir muncul di hujung kiri.
• Jing Negatif: Untuk mencipta kesan bertindih, kami menggunakan jidar negatif pada semua imej kecuali yang terakhir. Jumlah jidar boleh dilaraskan berdasarkan pertindihan yang diingini.
• Sempadan: Jidar pepejal putih ditambah di sekeliling setiap imej untuk memisahkannya secara visual.

Struktur HTML

Bersama-sama dengan gaya CSS yang disediakan, laraskan HTML anda seperti berikut:

<code class="html"><div class="avatars">
  <span class="avatar">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Bagaimanakah saya boleh mencapai imej sebaris bertindih dalam CSS tanpa bergantung pada kedudukan negatif atau indeks-z, terutamanya apabila berurusan dengan kiraan imej dinamik?" >
  </span>
  <span class="avatar">
    <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Bagaimanakah saya boleh mencapai imej sebaris bertindih dalam CSS tanpa bergantung pada kedudukan negatif atau indeks-z, terutamanya apabila berurusan dengan kiraan imej dinamik?" >
  </span>
  <span class="avatar">
    <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Bagaimanakah saya boleh mencapai imej sebaris bertindih dalam CSS tanpa bergantung pada kedudukan negatif atau indeks-z, terutamanya apabila berurusan dengan kiraan imej dinamik?" >
  </span>
</div></code>

Kod ini akan menghasilkan deretan imej sebaris yang bertindih tanpa memerlukan pengiraan yang rumit atau manipulasi imej luaran. Kesannya adalah dinamik sepenuhnya dan menyesuaikan diri dengan sebarang bilangan imej.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencapai imej sebaris bertindih dalam CSS tanpa bergantung pada kedudukan negatif atau indeks-z, terutamanya apabila berurusan dengan kiraan imej dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!