来自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索引为5，对于foreach循环中的下一个图像，我希望它的z索引为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或其他容器中，然后为图像本身提供绝对位置。