html - 为每个图像应用固定的 px 单位

Question

我有一张卡片图像，我需要重复它 30 次，每次我想申请一张特定卡片的左侧位置时，它会与卡片重叠，然后再停留在一副牌的位置上。

问题是，当我将左侧位置应用于图像卡片时，它会将相同的左侧位置应用于所有卡片，因此没有重叠位置。

所以我有这样的东西:

<template>
  <div class="triPack">
    <img :style="{'left': -index * 30}" v-for="index in 30" :key="index" src="../../assets/images/cardThemes/blue.png" alt="">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
  .triPack {
    display: flex;
    img {
      width: 80px;
      height: 100px;
      position: relative;
    }
  }
</style>

我想要这样的东西:

谢谢你们。

Answer 1

除了第一张图片 :not(:first-child)

你可以只用 css margin-left 来做到这一点

所以删除它 :style="{'left': -index * 30}"

.triPack {
   display: flex;  }
img {
   width: 80px;
   height: 100px;
    position: relative;
    }
img:not(:first-child) {
margin-left: -45px;
}

 <div class="triPack">
    <img  src="/image/XG0gL.png" alt="">
    <img  src="/image/XG0gL.png" alt="">
    <img  src="/image/XG0gL.png" alt="">
    <img  src="/image/XG0gL.png" alt="">
    
  </div>