Vuetify：仅降低卡片背景图亮度，不影响文字显示

算力阿峰

2026-7-11

解决方案

问题根源在于你把文本内容嵌套在了<v-img>内部，滤镜会默认作用于所有子元素。要实现仅降低图片亮度不影响文字，核心是将图片与文本分层布局，让文本独立于图片之上。

1. 调整组件结构

把<v-card-text>从<v-img>中移出，和<v-img>同级放在<v-card>内部，通过定位让文本居中覆盖在图片上：

<v-card class="bg-card" height="350">
  <!-- 背景图片层 -->
  <v-img src="你的图片URL" class="card-bg"></v-img>
  <!-- 文本内容层 -->
  <v-card-text class="card-content">
    <h2 class="card-title">卡片标题</h2>
    <p class="card-desc">这里是卡片的描述文本内容</p>
    <v-btn color="white" text>查看详情</v-btn>
  </v-card-text>
</v-card>

2. 添加CSS样式

通过定位和层级控制，确保文本在图片上方，仅给图片添加hover滤镜：

.bg-card {
  position: relative;
  overflow: hidden; /* 防止内容溢出卡片 */
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease; /* 平滑过渡动画 */
}

/* hover时仅对图片应用亮度滤镜 */
.bg-card:hover .card-bg {
  filter: brightness(0.5);
}

.card-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* 根据图片底色调整文字颜色 */
  z-index: 1; /* 确保文本层级高于图片 */
}