Below is a screenshot of a leaflet (http://leafletjs.com/) map with circles in them.
The o
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.