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

圆的不透明度为0.5,您可以清楚地看到它们重叠的位置.是否可以添加样式规则,以使重叠部分不具有更高的不透明度？似乎传单没有对此提供支持,但我想知道CSS是否可能实现这种功能？

我喜欢能够显示红色圆圈上方的内容(即,显示红色圆圈下方的内容)并具有均一的颜色.将不透明度分配给一个是不可行的.

解决方法:

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.然后,圆圈可以只是纯色,这意味着它们显示为均匀的半透明区域.

我本人还没有使用leaflet.js,所以我不确定在您的情况下这是否是可行的解决方案,但这是我会尝试的方法.