0

I have a login form in a card, i put a background image on it using the img prop, but I want to add opacity to it, I guess I will have to use some vanilla CSS on this but I don't really know how to approach it, when I inspect the element it adds the image as an inline style instead of using some <img> tag. Is there a way I could add opacity using the v-img component or do I have to do everything with vanilla CSS?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
        show: false,
    }
  },
})
<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-container>
        <v-row no-gutters>
            <v-col cols="12" sm="12">
                <v-card class="rounded-0 mx-auto" flat max-width="480" img="https://i.picsum.photos/id/845/200/200.jpg?hmac=KMGSD70gM0xozvpzPM3kHIwwA2TRlVQ6d2dLW_b1vDQ">

                    <!-- Login form -->
                    <v-form>
                        <v-container>
                            <v-row no-gutters>
                                <v-col cols="12" sm="12">
                                    <v-text-field label="Username/Email" color="brown lighten-1" placeholder="Username/Email" outlined></v-text-field>
                                </v-col>

                                <v-col cols="12" sm="12">
                                    <v-text-field placeholder="Password" outlined color="brown lighten-1" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" :type="show ? 'text' : 'password'" label="Password" @click:append="show = !show"></v-text-field>
                                </v-col>

                                <v-btn block class="rounded-0 white--text" color="#887783">Login</v-btn>
                            </v-row>
                        </v-container>
                    </v-form>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
  </v-app>
</div>
FlowMafia
  • 922
  • 2
  • 19
  • 37
  • You typically can't change opacity for background images. Can you not simply use a semi-transparent PNG instead? – Phil Sep 08 '20 at 04:44
  • I can! but I was curious if there was a workaround in the code itself – FlowMafia Sep 08 '20 at 04:45
  • Does this answer your question? [CSS Background Opacity](https://stackoverflow.com/questions/10422949/css-background-opacity) – Phil Sep 08 '20 at 04:53
  • From the duplicate, see the answer using `::before`. You can add a class to your `` and use that to insert a semi-transparent pseudo element with CSS – Phil Sep 08 '20 at 04:54

0 Answers0