小册子重叠形状不透明

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和它所有的孩子有0.5的opacity。这些圆形可以只是一种纯色，这意味着它们会显示为均匀的半透明区域。

我自己并没有使用leaflet.js，所以我不确定这是否是一种可行的解决方案，但这是我的尝试。