html - 如何在CSS中进行线性闪避？

Question

问题:

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

例如:

我有一张全屏背景图片。

还有一个包含子元素的 div。

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

每个样式定义一个 rgba 背景。

这可能以某种方式描述了这种情况。左边的“color 2”是我想要的，因为我没有把它放在容器里，它的颜色rgba(90, 90, 90, 0.35)是直接根据背景计算出来的.但是如果我在div中写元素(比如header bar)，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”。

2. 填充一个 div 但保留特定区域。 (不要填充元素在正上方的区域)

3. 脚本方式。

注意:

我正在从事 Angular 6 元素。也欢迎任何超出 vanilla JS 范围的解决方案。

谢谢!

Answer 1

不知道这是否是您要找的答案。
如果答案没有帮助，请在评论中告诉我，我会删除它。

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

但如果两者都具有透明背景，那么您可能需要引用这个:
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>

如果背景扎实的 child

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