来自Foreach循环的堆叠/重叠图像

Question

我有以下代码：

<?php foreach($results as $result) : ?> <img src='<?php echo BASE_URI; ?>/images/userImages/<?php echo $result->userPicture; ?>' class="pic-athlete" style="z-index:5; position:relative;"> <?php endforeach; ?>

目前显示一行中的所有图像。我希望它们相互叠加，即对于第一个图像，我希望它的z-index为5，对于foreach循环中的下一个，我希望它的z-index为4，依旧等等。 。 有谁知道如何实现这一目标？也许我需要使用除z-index之外的东西？先感谢您！

Answer 1

foreach只是一个循环，因此您可以创建一个可以在每个循环中递减的变量：

$count = 5

foreach ($results as $result) {
    <img src='<?php echo BASE_URI; ?>/images/userImages/<?php echo $result->userPicture; ?>' class="pic-athlete" style="z-index: <?php echo $count; ?>; position:relative;">
    $count--;
}

您想将图像直接放在彼此的顶部吗？您可能想要考虑将所有图像包装在具有相对位置的div或其他容器中，然后将图像赋予其绝对位置。