vue中如何遍历把这个模板代码中的item.name和item.url重叠在一起 <div class="mobile-home"> <div class="fuwu"><b>服务</b></div> <div v-for="item in state.list" :key="item" class="item" @click="add(item.link)" > <b class="text"> 丨 {{ item.name }}</b> <img :src="item.url" alt="" class="photo" /> </div> </div>
时间: 2023-10-14 09:06:10 浏览: 39
你可以使用CSS绝对定位和z-index属性将文本和图片重叠在一起。示例代码如下:
```html
<div class="mobile-home">
<div class="fuwu"><b>服务</b></div>
<div v-for="item in state.list" :key="item" class="item" @click="add(item.link)">
<img :src="item.url" alt="" class="photo" />
<b class="text"> 丨 {{ item.name }}</b>
</div>
</div>
<style>
.mobile-home {
position: relative;
}
.item {
position: relative;
width: 200px;
height: 300px;
margin: 10px;
}
.item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.item .text {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 24px;
z-index: 2;
}
</style>
```
在上面的代码中,我们将.item元素的position属性设置为relative,然后在.item元素中先添加img标签,再添加文本标签,这样文本就会自动覆盖在图片上面。我们使用CSS中的position属性来将img标签和文本标签定位在.item元素中。我们使用z-index属性来控制元素的层级,将图片放到最底层,文本放到最上层,从而实现重叠效果。