javascript - 传单重叠形状不透明度

Question

下面是一张带有圆圈的传单 ( http://leafletjs.com/ ) 地图的屏幕截图。

圆圈的不透明度为 0.5，您可以清楚地看到它们重叠的位置。是否可以添加样式规则以使重叠不具有更高的不透明度？传单似乎不支持这一点，但我想知道 css 是否可以做到这一点？

我喜欢能够显示红色圆圈结束的内容（即显示其下方的内容）并具有同质的颜色。将不透明度分配给一个是不可行的。

Answer 1

AFAIK 在 CSS 中没有办法防止半透明形状的重叠区域将它们的颜色“添加”到彼此，无论好坏，这是预期的行为（现实生活中这种形状也会发生这种情况）。

不幸的是，这对您没有太大帮助，但是有一种可能的解决方法。如果您可以将这些形状放入一个公共父元素中，则可以opacity:0.5;改为应用它。

简单的例子：

<div class="wrapper" style="opacity:0.5">
  <div class="circle"></div><!-- opacity:1 -->
  <div class="circle"></div><!-- opacity:1 -->
  <div class="circle"></div><!-- opacity:1 -->
</div>

这将使所有的.wrapper孩子都有一个opacity. 0.5然后圆圈可以只是纯色，这意味着它们显示为均匀的半透明区域。

我自己没有使用过leaflet.js，所以我不确定这在你的情况下是否是一个可行的解决方案，但这是我会尝试的。