css - 创建重叠的用户图标

Question

我正在尝试创建一个与用户图标重叠的组件，如图中所示。我已经看到这个在谷歌上被使用了。如果我有一个用户图标列表，我该如何将它们相互重叠？

我想要这样的东西 .

<template>
    <div >
    <ul>
      <li v-for="user in userList" :key="user.key">
        <user-icon-component :name="user.name" :image="user.picture"></user-icon-component>
      </li>
    </ul>
    </div>
</template>


<script>
export default {
  name: "UserList",
  props: {
    userList: {
      type: Object,
      default: null,
    },
  },
};
</script>

<style>

</style>

Answer 1

我喜欢你问题中的想法，并将其视为对自己的挑战，结果如下:

vue overlapping avatars component

基本上我采用的方法是使用组件的 props 作为样式绑定(bind)中的样式。还有一些 scoped style 但我认为如果需要它们也可以在样式绑定(bind)中设置(代码可能更清晰)。

user 属性是包含此属性的对象数组:img: 'imageURL' 并在 div 上使用 v-for元素:

:style="{ backgroundImage: `url(${user.img})`}"

我们可以设置图片。

对于重叠部分，div有position: relative，使用v-for的index >，样式绑定(bind)变成这样:

:style="{backgroundImage: `url(${user.img})`, left: `-${i*15}px`}"

除第一个元素外，每个元素都向左移动 15px。

这是最终结果的图像:

感谢您的提问，很有趣:)