混合相互堆叠的两个元素的透明色背景

Question

我想知道是否有办法将两种透明色混合在一起，以达到预定的颜色。

我有一个菜单栏。栏的背景颜色为rgb(0, 0, 0, 0.75)。左上角的徽标具有#9B0506的纯红色背景。你可以在http://www.phoenixwebdev.com.au/about-our-services/ecommerce/现场查看。该网站正在进行中。

我想让这个红色部分透明，但是当菜单栏后面有白色时，可以直观地获得完全相同的红色。透明的黑色在红色后面，会影响颜色。

有没有办法计算红色的十六进制值来实现这个目标？我甚至不知道如何使用单个透明项目来实现这一目标，而不是单独使用黑色复杂的东西。我不能注意它，因为我是colourblind。即使我能用数学解决方案也会唠叨我。

因此，就我的情况而言，我正在寻找一种方法来解决mystery transparent red colour堆叠在rgb(0, 0, 0, 0.75) = white上的#9B0506

我在https://css-tricks.com/basics-css-blend-modes/读到了有关css混音的内容。然而，这并不是我所说的。

Answer 1

根据实验，我设法使用rgba(163,0,2,.92)获得确切的颜色。下面的演示渲染了一个填充了彼此堆叠的颜色的框，以#9B0506作为整体颜色。

此外，您不需要依靠视力来测试理论值，免费应用程序（例如ColorPic和许多其他应用程序允许您实时检查屏幕上的像素，并获得他们的HEX / RGB颜色值直接。

据我所知，这并没有提供任何以编程方式计算它的方法，但如果有人尝试为此测试算法，它可以作为参考点。

＆＃13;

＆＃13;

.a { z-index: 1; background: white }
.b { z-index: 2; background: rgba(0,0,0,.75) }
.c { z-index: 3; background: rgba(163,0,2,.92) }

.a, .b, .c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

＆＃13;

＆＃13;

＆＃13;

根据您的要求，我尝试使用较低的不透明度值再现颜色。我发现rgba(171,0,0,.85)非常接近目标颜色，并且它的不透明度也略高。在这一点上，我相当确定，除了前面提到的任何其他值之外，不能达到确切的颜色，但这应该是足够接近的近似值，不会产生太大的差别。下面的演示有旧颜色和新颜色相邻，它们产生的颜色代码写在每一半。

＆＃13;

＆＃13;

.a { z-index: 1; background: white }
.b { z-index: 2; background: rgba(0,0,0,.75) }
.c { z-index: 3; background: rgba(163,0,2,.92) }
.d { z-index: 3; background: rgba(171,0,0,.85) }

.a, .b, .c, .d {
  position: absolute;
  top: 0;
  height: 100%;
}
.a, .b {
  left: 0;
  width: 100%;
}
.c, .d {
  color: #fff;
  font-size: 3em;
  font-family: "Consolas", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}
.c { left: 0 }
.d { right: 0 }

＆＃13;

<div class="a"></div>
<div class="b"></div>
<div class="c"><span>#9B0506</span></div>
<div class="d"><span>#9B0A0A</span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，使用rgba中的颜色比使用hexa中的颜色更容易。

因此，您要求的结果是9b0506 - ＆gt; rgb（155,5,6）

接下来，任何频道的公式都是

（f * a）+（b *（1-a））

其中f是前景值，b是通道的背景值

对前两个图层应用此公式，白色和黑色，不透明度为0.75，给出

0 * 0.75 +（255 * 0.25）= 63

因此基数为rgb（63,63,63）

现在，上层可以有你想要的任何alpha ...但是对于绿色通道，预期结果是5，而基础层的贡献将是63 *（1 - a）。因此，除了总结果之外，（1-a）的值大于0.08将对绿色通道贡献超过5。

由于值不能为负数，因此结果的最小 alpha为（1 - 0.08）= 0.92。

现在，我们可以计算r g b值：

r =（155 - （63 * 0.08））/ 0.92 = 163

b =（6 - （63 * 0.08））/ 0.92 = 1

（绿色通道，如前所述，为0）

所以结果是rgba（163,0,1,0.92）。

如果你想要更高的透明度，你需要降低绿色通道限制（或绿色通道结果更高，或基色变低..这将实现黑色层具有更高的不透明度）

Answer 3

你试过渐变背景

吗？

fun IntArray.pickEnough(initV: Int, reducer: (Int, Int) -> Int, predicate: (Int) -> Boolean): List<Int> {
    var sum = initV
    return list.takeWhile {
        sum = reducer(sum, it)
        predicate(sum)
    }
}

Answer 4

不确定是否可以计算它。虽然我们可以强制它：D

考虑画布元素A和画布元素B. 用户可以输入颜色A（＃9B0506）和颜色B（rgb（0,0,0,0.75））然后js循环将尝试颜色B的顶部的每一种颜色（rgba）并输出与颜色A最接近的匹配

我会尝试在jsfiddle中创建一个程序。