leaflet overlapping shapes opacity

后端 未结 1 1752
佛祖请我去吃肉
佛祖请我去吃肉 2021-01-18 07:13

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

\"leaflet\"

The o

相关标签:
1条回答
  • 2021-01-18 07:52

    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).

    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.

    Trivial Example:

    <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>
    

    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.

    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.

    0 讨论(0)
提交回复
热议问题