javascript - 我想让 v-card 透明，但它不能正常工作

Question

我希望 v-card 是透明的，但里面的东西不应该是透明的。我怎样才能用 CSS 实现它？

卡片.vue

    <v-card class="cardColor">
      <v-card-text>
        TEXT
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" @click="foo">Button</v-btn>
      </v-card-actions>
    </v-card>

通用.css

    .cardColor {
       background-color: white!important;
       border-color: transparent!important;
       opacity: 0.65;
     }

我试过写这个，但是没用。

    .cardColor {
       color: rgba(255, 255, 255, 0.5);
     }

Answer 1

你可以使用带轮廓的颜色属性

<v-card outlined color="transparent">
   ...
</v-card>