如何在 CSS 中执行线性闪避？

Question

问题：

子元素和它的容器都有一个透明的背景颜色。如果子元素在容器内，则子元素的颜色将根据父元素的颜色计算。我应该怎么做才能保持两者的透明度，同时使子背景颜色与我指定的颜色完全相同。

例如：

我有一个全屏背景图片。

还有一个div，里面有子元素。

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

每种样式都定义了一个 rgba 背景。

这可能会以某种方式描绘这种情况。左边的“颜色2”是我想要的，因为我没有放在容器中，它的颜色rgba(90, 90, 90, 0.35)是直接根据背景计算出来的。但是如果我在 div 中写元素（如在标题栏中），则 bg 颜色将根据 div 的 bg 颜色rgba(55, 55, 55, 0.35) 计算，这不是我想要的。

可能的解决方案：

1. 执行线性闪避。只需根据 div 的 bg 颜色添加 rgb delta 并保持 alpha 不变，这样 (55, 55, 55, 0.35) + (35, 35, 35) = (90, 90, 90, 0.35)

2. 在div 中填写但保留特定区域。 （不要填充元素正上方的区域）

3. 脚本方式。

注意：

我正在开发一个 Angular 6 项目。也欢迎任何超出 vanilla JS 范围的解决方案。

谢谢！

Answer 1

我不知道这是否是您正在寻找的答案。
如果答案没有帮助，请在 cmets 中告诉我，我将删除它。

但我的理解是，您希望您的子组件保留其背景颜色，并且只使用父组件的透明背景，并限制子组件的背景颜色不受影响。
那么这个答案涵盖了如果孩子和父母背景颜色都没有透明度的问题。意味着如果孩子有坚实的背景，它会涵盖解决方案，那么它是完美的。

但如果两者都具有透明背景，那么您可能需要参考：
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>

如果是纯色背景的孩子

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