向 Vuetify v-card 添加渐变：img

【问题标题】：Add gradient to Vuetify v-card :img向 Vuetify v-card 添加渐变：img
【发布时间】：2021-10-21 08:04:41
【问题描述】：

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

图像按应有的方式显示，但我只是想知道是否有任何方法对该图像应用渐变。

（其实我只是想让图片变暗，这样前面的文字会更易读）

【问题讨论】：

标签： image vue.js vuetify.js gradient vcf-vcard

【解决方案1】：

您可以使用线性渐变和图像添加自己的样式：

<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>

注意：在url() 中，您应该有图片的路径/网址。通过更改rgbA 颜色的不透明度来控制黑暗。图片位置 (center center)、图片大小 (cover) 和重复 (no-repeat) 与 img 属性复制相同，来自 v-card 生成它们。

【讨论】：