下面是一张带有圆圈的传单 ( http://leafletjs.com/ ) 地图的屏幕截图。
圆圈的不透明度为 0.5,您可以清楚地看到它们重叠的位置。是否可以添加样式规则以使重叠不具有更高的不透明度?传单似乎不支持这一点,但我想知道 css 是否可以做到这一点?
我喜欢能够显示红色圆圈结束的内容(即显示其下方的内容)并具有同质的颜色。将不透明度分配给一个是不可行的。
下面是一张带有圆圈的传单 ( 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
孩子都有一个opacity
. 0.5
然后圆圈可以只是纯色,这意味着它们显示为均匀的半透明区域。
我自己没有使用过leaflet.js,所以我不确定这在你的情况下是否是一个可行的解决方案,但这是我会尝试的。