Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

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.
 
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?
 
Hi there,
Can you provide some of the code for this?
Yes, absolutely.

CSS:
.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);
    }
}

HTML:
<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.

CSS:
.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);
    }
}
 
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).
opacity1.PNG

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

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.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom