CODEWITHSUNDEEP
vue.jsvuetify.js
Whatre Youdoing
Whatre Youdoing

Reputation: 73

How To Make Black-overlayed-image in Vue

I wanna make the image has an black overlay and the title "Top 10 Australian beaches" won't be affected by the black overlayed image.

template.vue

<template>
  <v-card
    class="mx-auto"
    max-width="400"
  >
    <v-img
      class="white--text align-end"
      height="200px"
      src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    >
      <v-card-title>Top 10 Australian beaches</v-card-title>
    </v-img>

    <v-card-subtitle class="pb-0">Number 10</v-card-subtitle>

    <v-card-text class="text--primary">
      <div>Whitehaven Beach</div>

      <div>Whitsunday Island, Whitsunday Islands</div>
    </v-card-text>

    <v-card-actions>
      <v-btn
        color="orange"
        text
      >
        Share
      </v-btn>

      <v-btn
        color="orange"
        text
      >
        Explore
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

The result of the code :

enter image description here

Upvotes: 1

Views: 843

Answers (1)

Dvdgld
Dvdgld

Reputation: 2164

I can come up with two option:

  1. Add a class to your v-img tag and style it using pseudo-elements:

     .your_class:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
 }

  2. If your're using Vuetify version 2.3.0+ you can hack this problem with gradient property. All you need is to provide the same rgba color to v-img tag:

    gradient="rgba(100,100,100,.8), rgba(100,100,100,.8)"

Upvotes: 2

Related Questions