在白色背景上计算 50% 不透明度的 RGB 值以匹配 100% 不透明度的 RGB 值

Question

我正在博客中嵌入一些 Facebook 帖子。我为我的iframe 做了一个漂亮的包装，其背景颜色与 Facebook 使用的相同：rgb(240, 242, 245)。

现在我想在具有自己背景颜色的div 中嵌入iframe：#f2f0fc。浅紫色上的灰色很刺眼。我不想使用 Facebook 的灰色，而是将我的 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, 242, 245);
  padding: 1rem;
}
  .facebook-wrapper.transparent {
    background-color: rgba(120, 121, 122, 0.5);
  }
  
  .facebook-wrapper.transparent-2 {
    background-color: rgba(120, 121, 122, 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>

如何计算正确的组件值或正确的不透明度值？在上面渲染的 sn-p 中，目标是获得与左上角框相匹配的颜色/不透明度组合，但可以应用于底色框的背景颜色。

Answer 1

根据 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, 255) * 1 * (1 - 0.5)) / (0.5 + 1 * (1 - 0.5))
rgb(240, 242, 245) = (ColorT * 0.5 + rgb(255, 255, 255) * 0.5) / 1
rgb(240, 242, 245) = ColorT * 0.5 + rgb(255, 255, 255) * 0.5
rgb(240, 242, 245) / 0.5 = ColorT + rgb(255, 255, 255)
2 * rgb(240, 242, 245) - rgb(255, 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, 242, 245);
  padding: 1rem;
}
  .facebook-wrapper.transparent {
    background-color: rgba(225, 229, 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>