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

Question

Hi i hope you are well.

I have an issue and i couldn't fix it i want to attach a background-image property from url and want to add an opacity with color on it who will not affect the childs.

Actually everything take the opacity if someone can help me it will be great !

Thank you by advance

Here is my sample of code:

<template>
    <Page class="ns-light page">
        <ActionBar :title="`${actionBarName}`"/>
        <StackLayout orientation="vertical" style="text-align: center; margin-top: 5%">
            <Label text="Tap to play the music" style="font-weight: bold"/>

            <Image :src="src" @tap="playSound" width="300" style="margin-top: 5%"/>
        </StackLayout>

    </Page>
</template>

<style scoped>
    ActionBar {
        background-color: #53ba82;
        color: #ffffff;
    }

    .page {
        background: url('~/assets/images/cards/background.png') no-repeat center #53ba82;
        background-size: cover;
        opacity: 0.5;
    }
</style>

Answer 1

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 ! :D

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>