CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.js
Maks
Maks

Reputation: 57

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

Upvotes: 5

Views: 20694

Answers (5)

Raj Omer Mustafa
Raj Omer Mustafa

Reputation: 159

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

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

Upvotes: 0

Alireza Bahrololoom
Alireza Bahrololoom

Reputation: 361

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>

Upvotes: 2

Ali
Ali

Reputation: 676

you can use color property with outlined

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

Upvotes: 7

Juan S.Montoya
Juan S.Montoya

Reputation: 316

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>

Upvotes: 4

ranjith babu S
ranjith babu S

Reputation: 1

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

Upvotes: 0

Related Questions