1

例如：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 值？

4

1 回答 1

0

好的，您是否有意包含半透明背景？内联块元素上的框模型意味着您的每个项目的背景和边框已经成倍增加 - 这是故意的问题还是错误？如果一个错误并且您只是询问如何让 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 上右边框以获得所有 4 种颜色的 75% 不透明度 = 50%(div1 bg) + X(div1 border-right) + 51%(div2 背景和边框)。这里的问题是 [50% + X + 51%] 等于 [50% + 50%] X 必须是一个负数，这是你不能拥有的。

于 2013-06-04T02:11:08.270 回答