CODEWITHSUNDEEP
vue.jsvuetify.js
user762579
user762579

Reputation:

vuetify v1.1 can I set some transparency to the v-card color?

currently I display a v-card as following :

                      <v-parallax :src="require('../../assets/images/member.jpeg')" height="100%">
                        <v-container grid-list-xl pt-5 style="max-height: 10em;">
                        <v-layout row justify-center align-center>
                          <v-flex xs6 sm6 md3>
                            <v-card class="member__account flexcard">
                              <v-card-title class="section__title justify-center">
                                <div class="headline mt-1 mb-1 display-1 text-xs-center">MY ACCOUNT</div>
                              </v-card-title>
                            </v-card>
                          </v-flex>
                        </v-layout>
                      </v-container>

...

The tritle "MY ACCOUNT" is displayed balc on white v-card background

However I have a v-parallax image below, and I would like to give some transparency to the v-card white background to let the parallax image appears a little bit inside it ....

Is it possible ? if yes, how ... thanks for feedback

Upvotes: 7

Views: 32297

Answers (2)

MAS
MAS

Reputation: 91

You can use rgb in color property. it's seem look like this

<v-card color="rgb(255, 0, 0, 0.2)"> </v-card>

you can set transparency in last value of rgb. rgb(color, color, color, setTransparency)

you can set value of transparency from 0 to 1.

1 = no transparency 0 = 100% transparent

Upvotes: 9

user762579
user762579

Reputation:

SOLVED : just changing the default .transparent class :

from

.transparent {
  background-color: transparent!important;
  border-color: transparent!important;
 }

to

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

Upvotes: 4

Related Questions