将相互叠加的两种元素的透明颜色背景混合起来
我想知道是否有一种方法可以将两个透明的颜色同时放置在一起，以达到预定的颜色。
我有菜单栏。酒吧的背景颜色是rgb(0, 0, 0, 0.75)。左上角的标志有一个#9B0506的纯红色背景。你可以在http://www.phoenixwebdev.com.au/about-our-services/ecommerce/现场查看。该网站正在进行中。
我想使这红色部分透明，但实现完全相同的红色，视觉上，当有白色后菜单栏。透明的黑色在红色的后面，会影响颜色。
是否有一种方法来计算红色的十六进制值来实现这一点？我甚至不知道如何通过一个单一的透明项目在坚实的背景下实现这一点，更不用说黑色复杂的事情了。我看不见它，因为我是色盲。即使我能，一个数学解也会对我唠叨。
因此，对于我的情况，我正在寻找一种方法来求解mystery transparent red colour叠加在rgb(0, 0, 0, 0.75)上的white = #9B0506
我在https://css-tricks.com/basics-css-blend-modes/上读过一篇关于css混合的文章。不过，这不像我说的那样。
回答 4
Stack Overflow用户
发布于 2016-01-31 04:12:07
在实验的基础上，我成功地使用rgba(163,0,2,.92)获得了确切的颜色。下面的演示呈现一个充满颜色的盒子，这些颜色互相叠在一起，给出#9B0506作为整体颜色。
此外，您不需要依靠视力来测试理论值，免费应用程序(如ColorPic和许多其他应用程序)允许您实时检查屏幕上的像素，并直接获取它们的HEX/RGB颜色值。
我知道这并没有提供任何编程计算方法，但是如果有人试图测试算法，它可以作为一个参考点。
.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%;
}<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
根据您的要求，我尝试以较低的不透明度值复制颜色。我已经发现，rgba(171,0,0,.85)非常接近目标颜色，而且它的透明度也稍高一些。在这一点上，我相当肯定，准确的颜色不能达到任何其他值，比前面提到的，但这应该是一个足够接近的近似，不会有太大的差别。下面的演示有旧的颜色和新的相邻的颜色，与他们产生的颜色代码写在每一半。
.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 }<div class="a"></div>
<div class="b"></div>
<div class="c"><span>#9B0506</span></div>
<div class="d"><span>#9B0A0A</span></div>
Stack Overflow用户
发布于 2016-01-31 13:56:13
首先，在rgba中使用颜色比用十六进制更容易。
因此，您请求的结果是9b0506 -> rgb(155，5，6)
接下来，任何通道的公式是
(f * a) + (b * (1-a))
其中f是前景值，b是信道的背景值。
将此公式应用于前2层，即不透明度为0.75的白色和黑色层，给出了
0* 0.75 + (255 * 0.25) = 63
因此，基座是rgb (63，63，63)
上层可以有你想要的任何阿尔法..。但对于绿色通道，预期结果为5，仅基本层的贡献就为63 *(1-a)。因此，一个值(1 -a )大于0.08将对绿色香奈儿的贡献超过5，超过了总结果。
由于这些值不能为负值，因此结果的最小α为(1-0.08)= 0.92。
现在，我们可以计算r值：
R= (155 - (63 * 0.08)) / 0.92 = 163
B= (6 - (63 *0.08)/ 0.92 =1
(前面讨论过的绿色通道是0)
结果是rgba (163，0，1，0.92)。
如果您希望获得更高的透明度，则需要降低绿色通道的限制(或者绿色通道的结果越高，或者基色越低。这将使黑层具有更高的不透明度)
Stack Overflow用户
发布于 2016-01-05 04:33:26
你试过背景渐变吗？
background: linear-gradient(direction, color-stop1, color- stop2, ...); https://stackoverflow.com/questions/34603474
复制相似问题
腾讯云开发者
