title: leaflet overlapping shapes opacity
body: <p>Below is a screenshot of a leaflet (<a href="http://leafletjs.com/" rel="nofollow noreferrer">http://leafletjs.com/</a>) map with circles in them. </p>
  
  <p><img src="https://i.stack.imgur.com/JRBxE.png" alt="leaflet"></p>
  
  <p>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? </p>
  
  <p>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.  </p>