Add gradient to Vuetify v-card :img-CodePudding

<v-card
  :img="require('@/core/assets/homeBg.png')"
>
</v-card>

The image is displaying as it should but i just want to know if there is anyway to apply gradient to that image .

(actually i just wanted to darken the image so that the texts infront of it will be more readable )

CodePudding user response：

You can add your own style with linear-gradient and image:

<v-card 
    style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(require('@/core/assets/homeBg.png')) center center / cover no-repeat"
>
</v-card>

Notice: inside url() you should have path/url to the image. Control darkness by changing opacity in rgbA colors. Image position (center center), image size (cover) and repeat (no-repeat) are copied the same as img prop from v-card generates them.