Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-10-24 18:45:02

asal

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