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