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

Question

我在一个博客里嵌入了一些Facebook的帖子。我为我的iframe做了一个很好的包装，它的背景颜色和Facebook使用的一样：rgb(240, 242, 245)。

现在，我想将iframe嵌入到具有自己背景颜色：#f2f0fc的div中。淡紫色上的灰色是刺耳的。我不想使用Facebook的灰色，我想用与Facebook的div相同的颜色使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>

​

如何计算适当的组件值或适当的不透明度值？在上面呈现的片段中，目标是获得与左上角框相匹配的颜色/不透明度组合，但该组合可用于对底部框的背景色进行阴影处理。

Answer 1

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

ColorF =(色T*透明度T+色B*OpacityB*(1- OpacityT)) /因子

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>

​