How to perform linear dodge in CSS?

Question

Problem:

A child element and its container both have a bg color with transparency. If the child element is inside the container, the color of the child element will be calculated based on the parent's. What should I do to keep transparency of both while making the child bg color exactly the same as what I spcify.

For example:

I have a fullscreen background image.

And a div with children elements inside.

<div class="container">
  <input class="mask-moderate__input" />
  <button class="mask-moderate__button"></button>
</div>

Each of the styles defines an rgba background.

This may somehow picture the situation. The "color 2" on the left is what I want, because I didn't put it in a container and its color rgba(90, 90, 90, 0.35) is calculated directly based on the background. But if I write elements in the div (as in the header bar), the bg color will be calculated based on the div's bg color rgba(55, 55, 55, 0.35), which is not what I want.

Possible solution:

1. Perform linear dodge. Just add the rgb delta based on the div's bg color and keep the alpha unchanged, so that (55, 55, 55, 0.35) + (35, 35, 35) = (90, 90, 90, 0.35) <- the same as "color 2" on the left.

2. Fill a div with but keep out a certain area. (Don't fill areas where elements are right above)

3. Script ways.

Note:

I'm working on an Angular 6 project. Any solution out of scope of vanilla JS is also welcome.

Thank you!

Answer 1

I don't know if this is the answer you are looking for or not.
If the answer is not helpful then please let me know in the comments, i will remove this.

But what i understand is that you want your child components to retain their background color and just play with the transparency background of the parent with the constraint that the background color of children is not affected.
Well this answer covers the question if both children and parent background color are not having transparency. Means it will cover solution if children is having solid background then it's perfect.

But if both are going to have transparency background then you may have to refer this :
Stack Overflow question on child and parent transparency

.flex-container {
  display: flex;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

.flex-container > div {
  background-image: linear-gradient(to right, rgba(0,255,0,0), rgba(0,0,20,0.3));
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

If solid background children

.flex-container {
  display: flex;
  background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1));
}

.flex-container > div {
  background-color: #ffff1f;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>