融合彼此堆叠的两个元素的透明颜色背景
詹姆斯·琼斯
我想知道是否有一种方法可以混合两种彼此叠加的透明颜色，以获得预定的颜色。
我有一个菜单栏。条的背景色为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混合的内容。但是，这并不能满足我的要求。
赛诺普
根据实验，我设法使用来获得准确的颜色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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
蓝屏死机没有修复解决方案
- 2
计算数据帧中每行的NA
- 3
UITableView的项目向下滚动后更改颜色，然后快速备份
- 4
Node.js中未捕获的异常错误，发生调用
- 5
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 6
Linux的官方Adobe Flash存储库是否已过时？
- 7
验证REST API参数
- 8
ggplot：对齐多个分面图-所有大小不同的分面
- 9
Mac OS X更新后的GRUB 2问题
- 10
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 11
带有错误“ where”条件的查询如何返回结果？
- 12
用日期数据透视表和日期顺序查询
- 13
VB.net将2条特定行导出到DataGridView
- 14
如何从视图一次更新多行（ASP.NET - Core）
- 15
Java Eclipse中的错误13，如何解决？
- 16
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 17
离子动态工具栏背景色
- 18
应用发明者仅从列表中选择一个随机项一次
- 19
当我尝试下载 StanfordNLP en 模型时，出现错误
- 20
python中的boto3文件上传
- 21
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
我来说两句