Vuetify JS 2.x卡片内容z索引

vxf3dgd4  于 2022-11-25  发布在  Vue.js
关注(0)|答案(2)|浏览(102)

我正在尝试在Vuetify JS卡片组件中的.v-responsive__content元素中添加一些自定义CSS。我在网上找过了,似乎找不到一个插槽,我需要手动设置这个元素的z索引值,因为我在v-card组件上使用::before来添加背景覆盖。
我在确定目标时遇到了一些问题,有人能提供帮助/建议吗?

<v-card
  class="mx-auto mb-8"
  max-width="375"
>
  <v-img
    class="white--text align-end"
    height="200"
    :src="source"
  >
    <v-card-title class="pb-0 mb-n1">Title</v-card-title>
    <v-row>
      <v-col cols="8">
        <v-card-subtitle class="white--text text-truncate py-0">Subtitle</v-card-subtitle>
      </v-col>
      <v-col class="text-right">
        <v-chip
          class="chip-custom chip-custom--primary ma-0 mr-4 mt-n2"
          color="primary"
          text-color="white"
          small
        >
          text
          <v-icon right small class="ml-1">mdi-star</v-icon>
        </v-chip>
      </v-col>
    </v-row>
  </v-img>
</v-card>
q3qa4bjr

q3qa4bjr1#

您应该可以这样访问它
1.将自定义类添加到vuetify组件

<v-img
 class="white--text align-end custom-image-class"
 height="200"
 :src="source">...</v-img>

1.添加Css(此处为sccs语法)

.custom-image-class{
   .v-responsive__content{
     border: 1px red solid;
   }
}

你想在v-img中添加html内容看起来有点奇怪。如果你想把图片作为背景图片,我不推荐使用v-img组件。

szqfcxe2

szqfcxe22#

我通常对z索引使用内联样式

相关问题