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

Total
1
Shares

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?

_x000D_

_x000D_

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

_x000D_

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

_x000D_

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">_x000D_
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">_x000D_
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">_x000D_
  _x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>_x000D_
_x000D_
 <div id="app">_x000D_
    <v-app>_x000D_
      <v-content>_x000D_
        <v-container>_x000D_
          <v-card class="cardColor">_x000D_
            <v-card-text>_x000D_
              TEXT_x000D_
            </v-card-text>_x000D_
            <v-card-actions>_x000D_
              <v-btn color="primary" @click="foo">Button</v-btn>_x000D_
            </v-card-actions>_x000D_
          </v-card>_x000D_
        </v-container>_x000D_
      </v-content>_x000D_
    </v-app>_x000D_
  </div>

_x000D_

_x000D_

_x000D_

Leave a Reply

Your email address will not be published. Required fields are marked *