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);
     }

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);
     }

• javascript
• css
• vue.js
• vuetify.js

• Welcome to Stack Overflow _ I don't know VueJS but if you want the background to be transparent it looks as though you have the elements in your CSS the wrong way round _ background-color: white !important; should be transparent and presumably border-color: transparent !important; should be white – inputforcolor Commented Aug 15, 2019 at 19:25
• 1 Changing a parent element's opacity will always effect all of its descendants. There is no way to circumvent that, functionally, so what you're describing isn't possible. Consider providing an explanation of the goal as opposed to your attempted solution; perhaps a screenshot or mockup of the desired effect. You can likely achieve it using a workaround. – Tyler Roper Commented Aug 15, 2019 at 19:25
• You need to override the Vuetify css definitions on v-card (background, shadow, etc) with your own. So background: transparent; and box-shadow: initial etc. Don't add opacity or it will affect everything. – Bryce Howitson Commented Aug 15, 2019 at 19:29

5 Answers 5

you can use color property with outlined

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

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

if you want a card with transparent background, you can choose one of these options:

1. add flat property to your v-card component, and set color="transparent".

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

2. add flat prop to your v-card and add the following style:

   <v-card flat style="background-color: transparent;">
      ...
   </v-card>
   

In CSS, we can achieve it by the following style:

.cardColor 
{ 
    z-index: 1; 
    position: relative; 
    width: 100%; 
    float: left; 
}

.cardColor:before 
{ 
    position: absolute; 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: #fff; 
    opacity: 0.35; 
    top: 0; 
    left: 0; 
    z-index: -1; 
}

In "vuetify": "^3.4.3" updated the props

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