我想让 v-card 透明，但效果不好

Question

我希望 v 卡是透明的，但里面的东西不应该是透明的。我怎样才能用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>

Answer 2

我给卡片背景设置了透明并删除了不透明度，这就是你需要的吗？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
setTimeout(()=>console.clear(), 100)

#app {
  background: linear-gradient(to right, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
}
.cardColor {
   background-color: rgba(255, 255, 255, 0.5) !important;
   border-color: white !important;
 }

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

 <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <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>
        </v-container>
      </v-content>
    </v-app>
  </div>