传单重叠形状不透明度

2022-01-12 00:00:00 leaflet javascript css maps styles

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

Below is a screenshot of a leaflet (http://leafletjs.com/) map with circles in them.

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

The opacity of the circle is 0.5 and you can clearly see where they overlap. Is it possible to add a style rule such that the overlap doesn't have a higher opacity? It doesn't seem like leaflet has support for this but I wonder if such a thing is possible with css maybe?

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

I like to be able to show what the red circle is over (ie, show what is beneath it) and have a homogenous colour. Assigning the opacity to one is not feasible.

推荐答案

AFAIK 在 CSS 中没有办法防止半透明形状的重叠区域相互添加"颜色，无论好坏是预期的行为(现实生活中这种形状也会发生这种情况).

AFAIK there is no way in CSS to prevent the overlapping areas of semi-transparent shapes from having their colours "added" to each other, for better or worse this is expected behavior (it's what would happen with such shapes in real life too).

不幸的是，这对您没有太大帮助，但是有一种可能的解决方法.如果您可以将这些形状放入一个公共父元素中，则可以将 opacity:0.5; 应用于该元素.

Unfortunately that doesn't help you very much, however there is a possible work-around. If you can put these shapes into a common parent element you can apply opacity:0.5; to that instead.

简单的例子:

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

That will make .wrapper and all of it's children have an opacity of 0.5. The circles can then just be a solid colour, which will mean they display as a homogeneous semi-transparent zone.

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

I have not used leaflet.js myself, so I don't know for certain if this is a workable solution in your situation, but it's what I would try.

相关文章