小叶重叠形状不透明

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，所以我不确定这是否适合您的情况，但这是我会尝试的。