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

好的，您是否有意包含半透明背景？内联块元素上的盒子模型意味着你的每个项目的背景和边框已经成倍增加 - 这是故意的问题还是错误？如果出现错误并且您只是询问如何将2个半透明物体叠加到0.5不透明度，其中第二个是0.3不透明度（因此X + 0.3 = 0.5），则需要使用0.28。 0.29意味着0.71光通过。您的第二个项目设置为0.3不透明度，其中70％的剩余71％光线通过。 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必须是负数，这是你不能拥有的。

计算重叠的rgba值

1 个答案: