javascriptcssvue.jsvuetify.js

I want to make v-card transparent, but it doesn't work right


I want that v-card be transparent, but what is inside it should not be transparent. How can I make it with CSS?

card.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>

common.css

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

I tried to write this, but it doesn't work.

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

Solution

  • I put a transparent to the card background and remove the opacity, this is what you need?

    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>