前言:使用任何的UI模板确实是件烦人的事情,有时候想改个样式死活都改不成功。这次使用element-UI模板里面的走马灯,想实现文字覆盖在图片上跟着图片轮播的效果,可事实却不如人愿,不过后面总算解决了。就是要定个位。
图示如下:
代码如下:
<template>
<div class="block">
<el-carousel trigger="click" height="25rem" >
<el-carousel-item v-for="item in images" :key="item.id" name="item.id">
<div class="pic_item">
<img class="small" :src="item.src" />
<h3>{
{item.title}}</h3>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "carousel",
data() {
return {
images:[]
};
},
}
</script>
<style scoped>
.el-carousel__item h3 {
color: white;
font-size: 0.8rem;
opacity: 0.75;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
.block {
width: 100%;
}
.small {
width: 100%;
height: 100%;
position: relative;
}
.pic_item {
position: relative;
height: 100%;
}
.pic_item:hover{
cursor: pointer;
}
.pic_item img {
width: 100%;
height: 100%;
}
.pic_item h3 {
position: absolute;
left: 1rem;
bottom: 2rem;
}
</style>
```
<el-carousel-item></el-carousel-item>
下面似乎只能跟着一个标签,所以要想即显示图片又想显示文字,就要用一盒子去包裹他们。再给盒子里的图片和文字做个定位就可以了。