如何为Vuetify的v-card组件:img属性绑定的图片添加渐变遮罩？

可行实现方案共3种，可根据你的实际需求选择： #

方案1：使用v-card内置img插槽叠加渐变蒙层（最推荐，适配Vuetify原生设计） #

无需额外全局样式，直接复用Vuetify组件能力实现渐变效果，适配不同版本的Vuetify框架：

<v-card>
  <!-- 替换原有的:img属性，用img插槽自定义背景层 -->
  <template #img>
    <v-img
      :src="require('@/core/assets/homeBg.png')"
      cover
      width="100%"
      height="100%"
    >
      <!-- 渐变蒙层，可自行调整渐变方向、颜色和透明度，0.6/0.3为透明度参数，数值越大越暗 -->
      <div class="w-full h-full bg-gradient-to-b from-black/60 to-black/30"></div>
    </v-img>
  </template>

  <!-- 原有卡片内容无需修改 -->
  <v-card-title>测试标题</v-card-title>
  <v-card-text>卡片上层文字内容</v-card-text>
</v-card>

如果是Vuetify2没有内置渐变工具类，自行给div加自定义类写渐变样式即可

方案2：原有结构不变，用自定义CSS加渐变蒙层 #

如果不想修改原有v-card的结构，直接给组件加自定义类配合深度选择器实现：

1. 模板代码添加自定义类：

<v-card
  class="card-darken-bg"
  :img="require('@/core/assets/homeBg.png')"
>
  <!-- 原有卡片内容 -->
</v-card>

2. 添加样式代码（如果是scoped样式必须加深度选择器）：

<style scoped>
/* Vuetify3 深度选择器写法 */
:deep(.card-darken-bg .v-card__img)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
  z-index: 1;
}

/* Vuetify2 深度选择器写法 */
/* ::v-deep .card-darken-bg .v-card__img::before {
  同上样式
} */
</style>

方案3：整体调暗背景（无需渐变） #

如果不需要渐变效果，只需要整体降低背景图亮度，直接用filter属性即可，代码更简洁：

<style scoped>
:deep(.card-darken-bg .v-card__img) {
  /* 亮度参数范围0-1，数值越小背景越暗，0.5为原始亮度的50% */
  filter: brightness(0.5);
}
</style>

内容的提问来源于stack exchange，提问作者Akash NO