传单重叠形状不透明度

Question

以下是一个带有圆圈的叶片地图（http://leafletjs.com/）的截图。

圆圈的不透明度为0.5，你可以清楚地看到它们重叠的位置。是否可以添加样式规则，使重叠部分不具有更高的不透明度？Leaflet似乎不支持此功能，但我想知道是否可能使用CSS实现这样的事情？

我希望能够显示红色圆圈所在的位置（即显示其下方的内容）并具有均匀的颜色。将不透明度分配给其中一个是不可行的。

- cantdutchthis

Answer 1

据我所知，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，因此我不确定这是否是您情况下可行的解决方案，但这是我会尝试的方法。

- SimonR

---

我通过将它适配到d3使您的答案可行。它可以工作！这里可以找到演示：http://jsfiddle.net/cantdutchthis/X8saC/。 - cantdutchthis

但是，如果我们需要视图内部的任何文本 - 它将具有0.5的不透明度。有没有解决方法可以使内部视图恢复正常的不透明度。 - vicky keshri