6

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

传单

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

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

4

1 回答 1

6

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,所以我不确定这在你的情况下是否是一个可行的解决方案,但这是我会尝试的。

于 2013-08-23T09:23:34.653 回答