Html 如何在CSS中执行线性减淡？

问题：

子元素及其容器都具有透明的bg颜色。如果子元素位于容器内，则子元素的颜色将基于父元素的颜色计算。我应该做些什么来保持两者的透明度，同时使子bg颜色与我指定的完全相同

例如：

我有一个全屏背景图像

和一个

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 color

rgba（55，55，55，0.35）

计算，这不是我想要的。

可能的解决方案：

---

执行线性减淡。只需根据div的bg颜色添加rgb delta并保持alpha不变，这样（55,55,55,0.35）+（35,35,35）=（90,90,90,0.35）我不知道这是否是您要寻找的答案
如果答案没有帮助，请在评论中告诉我，我将删除此选项。

但我的理解是，您希望您的子组件保留其背景色，并仅在不影响子组件背景色的约束下使用父组件的透明背景。
这个答案涵盖了孩子和父母背景色是否都没有透明度的问题。这意味着它将涵盖解决方案，如果孩子们有坚实的背景，那么它是完美的

但是，如果两者都有透明背景，那么您可能必须参考以下内容：

.flex容器{
显示器：flex；
背景图像：线性渐变（向右，rgba（255,0,0,0），rgba（255,0,0,1））；
}
.flex容器>div{
背景图像：线性渐变（向右，rgba（0255,0,0），rgba（0,0,20,0.3））；
利润率：10px；
填充：20px；
字体大小：30px；
}

1.
2.
3.

你能澄清你想要的效果吗？用透明的颜色填充容器，除了放置元素的区域。你能画出它的样子吗？很抱歉没有说清楚。我更新了图片，希望它有助于澄清我的目的。谢谢你的回复，但我认为问题没有解决。我重述了我的问题，希望这次能澄清。@ZenasChen你看到了吗？有帮助吗？是的。我想你链接中提到的

混合模式

启发了我。我可能需要编写单独的类来处理这种覆盖。尽管如此，我还是希望有更简单的解决方案，在那里我可以使用一个统一的类集。谢谢大家!@ZenasChen如果将透明度视为me州共享的链接，则会出现颜色差异。另外，

mix-blend模式

很好使用，但要注意它的支持。