How to Prevent Child Transparent Background from Mixing with the Parent Transparent Background

[cssisenthusiastic]

I have a container which has a transparent background set with rgba(), within this container, there is a div element that also has its background with the same alpha as the parent but different RGB.

The problem I have is that the parent container is visible underneath the child container, which makes it look like the child container has a higher alpha value while it doesn't.

How to hide or, let's say, prevent the main container's background from filling in the child element area so that they both have their transparency and don't depend on each other?

I've searched for a solution for so long, but the only thing I've come close to is using the opacity property for the main container and using solid hex backgrounds, but this affects the text as well.

Please, if you're able to help me, I highly appreciate it.

 

[Antero360]

I have a container which has a transparent background set with rgba(), within this container, there is a div element that also has its background with the same alpha as the parent but different RGB.

The problem I have is that the parent container is visible underneath the child container, which makes it look like the child container has a higher alpha value while it doesn't.

How to hide or, let's say, prevent the main container's background from filling in the child element area so that they both have their transparency and don't depend on each other?

I've searched for a solution for so long, but the only thing I've come close to is using the opacity property for the main container and using solid hex backgrounds, but this affects the text as well.

Please, if you're able to help me, I highly appreciate it.

Hi there,
Can you provide some of the code for this?

 

[cssisenthusiastic]

Hi there,
Can you provide some of the code for this?

Yes, absolutely.

.container
{
    min-width: 550px;
    background-color: rgba(51, 54, 61, .9);
    color: white;
    padding: 25px;

    .box
    {
        padding: 20px 10px;
        border: 1px solid #888888;
        border-style: dashed;   
        font-family: 'Courier New', monospace;
        font-size: 14px;
        background-color: rgba(41, 43, 49, .9);
    }
}

<div class="container"> <!-- It has its own background -->
    <div class="box"> <!-- The background of this box is mixed with the container's background, resulting in a mix between the two. Container remains unaffected outside this box since it's the first element. -->
        content
    </div>
</div>

What I want is what's achieved by adding opacity: 0.9; to the main container and using solid backgrounds.
However, I don't want the text and other elements to be affected, only the background colors.

.container
{
    min-width: 550px;
    background-color: rgba(51, 54, 61, 1);
    color: white;
    padding: 25px;
opacity: 0.9;

    .box
    {
        padding: 20px 10px;
        border: 1px solid #888888;
        border-style: dashed;   
        font-family: 'Courier New', monospace;
        font-size: 14px;
        background-color: rgba(41, 43, 49, 1);
    }
}

 

[cssisenthusiastic]

Here's a more concrete explanation:

This is end result I want, excluding the affected text (It's not noticeable but it has been affected, I used opacity: 0.9 on the container).


What I get with background-color: rgba(r, g, b alpha) to make the background transparent:


In the second image It's very clear that the box is being visibly affected by the container's background, look underneath the whole container, there's text. Compare the two and you'll know what I mean.

Thank you so much for your time, I hope you're able to help me.

 

[cssisenthusiastic]

By the way, I forgot to mention that I'm using scss, hence the nested css.

I've also tried using pseudo-elements, but my efforts were to no avail.