如何在 Vuetify 3、Vue 3 的 v-navigation-drawer 中為圖像添加漸變？

Question

我在帶有 Vuetify 3 的 Vue 3 應用程序中使用v-navigation-drawer ：

<template>
    <v-navigation-drawer app :image="backgroundImage">
        ...
    </v-navigation-drawer>
</template>
  
<script>
import backgroundImage from ' @/assets/backgroundImage.jpg'
export default {
    name: 'MyDrawer',
    setup() {
        return { backgroundImage }
    },
}
</script>

我想給這張圖片添加一個漸變，類似於

<v-img
src="backgroundImage"
gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
></v-img>

我怎么能做到這一點？

Answer 1

//Adding id to navigation drawer 
<v-navigation-drawer 
    id="nav_drawer">
</v-navigation-drawer>

 // In the style tag, assign image and gradient for background
<style>
#nav_drawer{
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url('https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg');
    background-size: cover;
    color: white;
}
</style>