小叶重叠形状不透明

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和它所有的孩子有一个opacity的0.5.然后圆圈可以是纯色,这意味着它们显示为均匀的半透明区域.

我自己没有使用过leaflet.js,所以我不确定在你的情况下这是否是一个可行的解决方案,但这是我会尝试的.