在白色背景上计算 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>

如何计算正确的分量值或正确的不透明度值？在上面呈现的代码段中，目标是获得与左上角框匹配的 color/opacity 组合，但可以应用于为底部框的背景颜色添加阴影。

Answer 1

根据 Termani 的评论，给出了公式：

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF is our final color. ColorT/ColorB are respectively the top and bottom colors. opacityT/opacityB are respectively the top and bottom opacities defined for each color:

The factor is defined by this formula 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>

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

Calculate RGB value at 50% opacity on a white background to match RGB value at 100% opacity

css

colors

transparency

background-color

alpha-transparency