如何解决在白色背景上计算不透明度为50%的RGB值以匹配不透明度为100%的RGB值
我正在Facebook中嵌入一些Facebook帖子。我为iframe
制作了一个漂亮的包装纸,样式与Facebook使用的背景颜色相同:rgb(240,242,245)
。
现在,我想将iframe
嵌入具有自己的背景颜色div
的{{1}}中。浅紫色上的灰色刺痛。与其使用Facebook的灰色,不如使用我的#f2f0fc
来使我的div
变暗,其程度与Facebook的灰色white
一样。
最初,我以为我可以将Facebook的每个颜色分量切成两半,并应用0.5
不透明度,但这显然是不正确的。
编辑:我的第二个想法是,因为我将三个组件切成两半,所以实际上是三次操作,因此我必须将不透明度设置为0.5^3 = 0.125
。距离更近了,但还差一点。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.facebook-wrapper {
display: flex;
background-color: rgb(240,245);
padding: 1rem;
}
.facebook-wrapper.transparent {
background-color: rgba(120,121,122,0.5);
}
.facebook-wrapper.transparent-2 {
background-color: rgba(120,0.125);
}
.facebook-wrapper > .post {
max-width: 680px;
width: 100% !important;
margin-left: auto;
margin-right: auto;
background-color: white;
padding: 0.5rem 1rem;
}
.white {
padding: 1rem 0;
background-color: white;
border: 1px solid gray;
}
.alert {
background-color: #f2f0fc;
padding: 1rem 0;
}
<div class="grid">
<h2>Opaque</h2><h2>50% transparent</h2><h2>12.5% transparent</h2>
<div class="white">
<div class="facebook-wrapper">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="white">
<div class="facebook-wrapper transparent">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="white">
<div class="facebook-wrapper transparent-2">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="alert">
<div class="facebook-wrapper">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="alert">
<div class="facebook-wrapper transparent">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="alert">
<div class="facebook-wrapper transparent-2">
<div class="post">Facebook post!</div>
</div>
</div>
</div>
如何计算正确的组分值或正确的不透明度值?在上述渲染的代码段中,目标是获得与左上方框匹配的颜色/不透明度组合,但可以将其应用于底框的背景色。
解决方法
根据Termani的评论,this answer为我们提供了公式:
ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF 是我们的最终颜色。 ColorT / ColorB 分别是顶部和底部的颜色。 opacityT / opacityB 是分别为每种颜色定义的顶部和底部不透明度:
factor
由此公式OpacityT + OpacityB*(1 - OpacityT)
定义。
OpacityB
在这种情况下是1
,而ColorB
是rgb(255,255,255)
。
将所需值插入方程式中,我们得到:
rgb(240,242,245) = (ColorT * 0.5 + rgb(255,255) * 1 * (1 - 0.5)) / (0.5 + 1 * (1 - 0.5))
rgb(240,255) * 0.5) / 1
rgb(240,245) = ColorT * 0.5 + rgb(255,255) * 0.5
rgb(240,245) / 0.5 = ColorT + rgb(255,255)
2 * rgb(240,245) - rgb(255,255) = ColorT
rgb(480 - 255,484 - 255,490 - 255) = ColorT
rgb(225,229,235) = ColorT
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
.facebook-wrapper {
display: flex;
background-color: rgb(240,245);
padding: 1rem;
}
.facebook-wrapper.transparent {
background-color: rgba(225,235,0.5);
}
.facebook-wrapper > .post {
max-width: 680px;
width: 100% !important;
margin-left: auto;
margin-right: auto;
background-color: white;
padding: 0.5rem 1rem;
}
.white {
padding: 1rem 0;
background-color: white;
border: 1px solid gray;
}
.alert {
background-color: #f2f0fc;
padding: 1rem 0;
}
<div class="grid">
<h2>Opaque</h2><h2>50% transparent adjusted</h2>
<div class="white">
<div class="facebook-wrapper">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="white">
<div class="facebook-wrapper transparent">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="alert">
<div class="facebook-wrapper">
<div class="post">Facebook post!</div>
</div>
</div>
<div class="alert">
<div class="facebook-wrapper transparent">
<div class="post">Facebook post!</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。