javascript - 想要在 vuetify 的轮播中添加带有一些文本的叠加层

Question

我想在 Vuetify 的轮播中添加带有一些文本的叠加层。它应该看起来像这个网站。它在轮播的右下角：cse.manarat.ac.bd

不过形状并不重要。

我想知道它是否可能。到目前为止，这是我能做的，但我似乎无法将它与旋转木马的底部对齐。如果分隔符被删除，它就可以了。

<template>
    <v-card flat class="mx-3">
        <v-row>
            <v-col cols="12">
                <v-carousel height="auto" show-arrows-on-hover>
                    <v-carousel-item v-for="(item, i) in items" :key="i">
                        <v-img
                            :src="item.src"
                            aspect-ratio="1.77"
                            max-height="500"
                        >
                            <v-alert
                                text
                                color="info"
                                width="auto"
                                height="auto"                                
                            >

                            <div class="">
                                Proin magna. Vivamus in erat ut urna cursus vestibulum. Etiam imperdiet imperdiet orci.  
                            </div>
                                                                    
                            </v-alert>
                        </v-img>
                    </v-carousel-item>
                </v-carousel>
            </v-col>
        </v-row>
        <v-row class="" justify="space-around ml-1 ml-md-0 mr-1 mr-md-3">
            <v-col cols="3" class="">
                
            </v-col>
            <v-col cols="12" md="9" class="black mt-0 mt-md-3">
                <v-card class="pl-0 ml-0 mt-md-0">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Aut eaque eius alias fugit cum obcaecati aliquam nihil
                    facilis itaque dignissimos quis explicabo, voluptatem
                    repudiandae et! Quod hic architecto fugit qui.
                </v-card>
            </v-col>
        </v-row>
    </v-card>
</template>

<script>
import QuickLinks from "./components/quicklinks";
// import TopNav from './topnav'
export default {
    data: () => ({
        items: [
            {
                src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
            },
            {
                src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
            },
            {
                src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
            },
            {
                src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
            }
        ]
    }),
    components: {
        
    }
};
</script>

标签： javascriptvuejs2vuetify.js