html - 计算重叠的 rgba 值

Question

例如:http://jsfiddle.net/CPK7L/2/

.example {

  display: inline-block;
  padding: 50px;
  background: rgba(0, 0, 0, 0.5);
  border: 25px solid rgba(0, 0, 0, 0.5);
  margin-right: -30px;
}

.example2 {

  display: inline-block;
  padding: 50px;
  background: rgba(0, 0, 0, 0.3);
  border: 25px solid rgba(0, 0, 0, 0.3);
}

如您所见，第一个元素的右边框与第二个元素的左边框重叠。发生这种情况时，它们的 rgba 值叠加起来，使右边框显得更暗。

如果我希望右边框在与第二个元素的左边框重叠时显示其“原始”颜色，如何计算右边框所需的 alpha 值？

Answer 1

好的，您是故意包含半透明背景的吗？内联 block 元素上的盒子模型意味着每个元素的背景和边框已经成倍增加 - 这是故意的问题还是错误？如果一个错误，你只是问如何让 2 个半透明对象重叠以获得 0.5 不透明度，其中第二个是 0.3 不透明度(所以 X + 0.3 = 0.5)你需要使用 0.28。0.29 表示 0.71 光线通过。您的第二个元素设置为 0.3 不透明度，让剩余 71% 的光线中的 70% 通过。 71 的 70% 接近 50。

如果你需要包括背景，你会做类似的事情第 1 项:背景 50% + 边框 50% = 75% 不透明度。第 2 项:背景 30% + 边框 30% = 51% 不透明度。需要在 item1 上使用 border-right 以获得所有 4 种颜色的 75% 不透明度 = 50%(div1 bg) + X(div1 border-right) + 51%(div2 背景和边框)。这里的问题是 [50% + X + 51%] 等于 [50% + 50%] X 必须是一个负数，你不能有。