在白色背景上计算不透明度为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>