Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?

Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?

Susan Sarandon
Lepaskan: 2024-10-24 18:45:02
asal
346 orang telah melayarinya

Bertindih Berbilang Imej Sebaris

Anda berhasrat untuk membentangkan satu set imej yang ditindih serupa dengan yang berikut:

How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?

Kod semasa anda:

.avatar img { border-radius: 50%; position: relative; left: -5px; z-index: 1; }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;avatars&quot;&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/70&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/50&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/20&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/100&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;!-- Variable amount more avatars --&gt; &lt;/div&gt; &lt;p&gt;4 People&lt;/p&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p></p>Penyelesaian ini menjajarkan imej secara fleksibel, memastikan susunan yang betul tanpa mengira kiraan imej.<p></p>

Atas ialah kandungan terperinci Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan