[Vuejs]-Nativescript-Vue How to make Transparency to Page component who will not affect the childs

by

0👍

✅

So thanks to: Tao who took the time to answer me

After trying a lot of things i read the documentation and found out how to do it !

Problematic: "i want an image as a background and a transparent color above the image."

I will explain myself, so i tried to apply css background-image and adding the opacity to it.

  1. The opacity

The opacity is going to modify all of the elements inside your chosen element.

When i used opacity in Page it even changed the opacity of the image and that was not what i was looking for …

  1. The alpha (rgba)

And then i thought there is alpha = rgba() and you can achieve the transparency of the specific element so = "a color transparent above the image."

So what I did was very simple, I had to see if I could define an rgba class on one of the child elements and i chose: GridLayout (the Layout Container).

So i added a background-color: rgba(0, 255, 0, 0.1) and then i had the color with transparency

And i let the background-image on Page component and that did the trick ! 😀

I will put the code of it with the second code over here:

  <template>
    <Page class="ns-light page">
        <ActionBar title="Audio Mémo Manjak - Accueil"/>
        <GridLayout width="100%" height="100%" columns="*,*,*,*,*"  rows="auto,auto,auto,auto,auto" class="layout">
            <StackLayout v-for="(card, index) of cards" :key="index" :col="`${ index % 5 }`" :row="`${ index / 5 }`">
                <Image :src="card.src" style="margin: 30px 15px;" @tap="onTappedFun(card)"/>
            </StackLayout>
        </GridLayout>
    </Page>
</template>
<style>
    ActionBar {
        background-color: #53ba82;
        color: #ffffff;
    }

    .page {
        background-image: url("~/assets/images/cards/background.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .layout {
        background-color: rgba(0, 255, 0, 0.1);
        padding-top: 100%;
    }
</style>

Leave a comment